Button 3D Press
Hover to triggerA thick bottom edge makes a 3D key that flattens when pressed.
Move the pointer over the box
Triggered by
:hover and never auto-plays on load. Move the pointer in and out to watch it again.
Tune parameters
Interactive animations are driven by pointer state; duration and easing live on
transition / animation — change the numbers in the code below.
Full code
/* Button 3D Press */
.anim-btn-3d-press {
box-shadow: 0 6px 0 #1e40af;
transition: transform .12s ease, box-shadow .12s ease;
}
.anim-btn-3d-press:hover {
transform: translateY(-2px);
box-shadow: 0 8px 0 #1e40af;
}
.anim-btn-3d-press:active {
transform: translateY(4px);
box-shadow: 0 2px 0 #1e40af;
}