Press Ring
Press to triggerA double ring appears on press — for actions needing clear confirmation.
Hold the box down
Triggered by
:active Hold the box down, release, and it replays.
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
/* Press Ring */
@keyframes pressRing {
from { box-shadow: 0 0 0 0 rgba(37,99,235,.45), 0 0 0 0 rgba(37,99,235,.3); }
to { box-shadow: 0 0 0 10px rgba(37,99,235,0), 0 0 0 22px rgba(37,99,235,0); }
}
.anim-press-ring:active {
animation: pressRing .6s ease-out;
}