Parallax 3D Button with JavaScript (Js) Controlled CSS Variables

Sebelumnya saya sudah berbagi tombol Jelly Button, dan kali ini saya akan berbagi koding Parallax 3D Button with JavaScript (Js) Controlled CSS Variables.

Kalian bisa cek Preview dan mencobanya di CodePen di bawah ini:

Gimana? Keren banget, lho!

Parallax 3D Button with JavaScript (Js) Controlled CSS Variables

Masuk ke Blogger > Tema > Edit HTML

Simpan kode CSS di bawah ini, di atas kode </style> atau </b:skin>

a {
position: relative;
display: inline-block;
padding: 1.2em 2em;
text-decoration: none;
text-align: center;
cursor: pointer;
user-select: none;
color: white;

&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(135deg, #6e8efb, #a777e3);
border-radius: 4px;
transition: box-shadow .5s ease, transform .2s ease; 
will-change: transform;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transform:
translateY(var(--ty, 0))
rotateX(var(--rx, 0))
rotateY(var(--ry, 0))
translateZ(var(--tz, -12px));
}

&:hover::before {
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

&::after {
position: relative;
display: inline-block;
content: attr(data-title);
transition: transform .2s ease; 
font-weight: bold;
letter-spacing: .01em;
will-change: transform;
transform:
translateY(var(--ty, 0))
rotateX(var(--rx, 0))
rotateY(var(--ry, 0));
}
}

body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
transform-style: preserve-3d;
transform: perspective(800px);
}

Selanjutnya simpan JavaScript (Js) di bawah ini di atas </head>. Jika gagal, coba simpan di atas kode </body>

const docStyle = document.documentElement.style
const aElem = document.querySelector('a')
const boundingClientRect = aElem.getBoundingClientRect()

aElem.onmousemove = function(e) {
const x = e.clientX - boundingClientRect.left
const y = e.clientY - boundingClientRect.top
const xc = boundingClientRect.width/2
const yc = boundingClientRect.height/2
const dx = x - xc
const dy = y - yc
docStyle.setProperty('--rx', `${ dy/-1 }deg`)
docStyle.setProperty('--ry', `${ dx/10 }deg`)
}

aElem.onmouseleave = function(e) {
docStyle.setProperty('--ty', '0')
docStyle.setProperty('--rx', '0')
docStyle.setProperty('--ry', '0')
}

aElem.onmousedown = function(e) {
docStyle.setProperty('--tz', '-25px')
}

document.body.onmouseup = function(e) {
docStyle.setProperty('--tz', '-12px')
}

Kode HTML yang diperlukan untuk memanggil tombol Button ini:

<a href="#" data-title="Awesome Button"></a>

Tombol Demo dan Download dengan nama Parallax 3D Button with JavaScript (Js) Controlled CSS Variables ini pun kalian gunakan secara bebas!