Button Ripple
Hover to triggerA white ripple spreads from the centre on press — striking on dark buttons.
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 Ripple */
@keyframes btnRipple {
from { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
to { box-shadow: 0 0 0 22px rgba(255,255,255,0); }
}
.anim-btn-ripple:active {
animation: btnRipple .55s ease-out;
}