Button Lift & Press
Hover to triggerRises on hover and drops on press, mimicking real key travel.
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 Lift & Press */
.anim-btn-lift-press {
transition: transform .18s ease, box-shadow .18s ease;
}
.anim-btn-lift-press:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(37,99,235,.35);
}
.anim-btn-lift-press:active {
transform: translateY(1px);
box-shadow: 0 2px 6px rgba(37,99,235,.3);
}