Buttons
Button Press Animation
A tactile scale-down on click with a quick, snappy release.
Opens with this animation loaded. Nothing is uploaded — the scene travels in the link.
.button-press {
transform: translate3d(165px, 137px, 0);
width: 150px;
height: 46px;
background: #22d3ee;
border-radius: 999px;
color: #06281e;
font-size: 15px;
font-weight: 700;
transition: transform 160ms ease-out;
}
.button-press:hover {
transform: translate3d(165px, 137px, 0) scale(1.04, 1.04);
}
.button-press:active {
transform: translate3d(165px, 137px, 0) scale(0.96, 0.96);
transition: transform 80ms ease-in;
}
@media (prefers-reduced-motion: reduce) {
.button-press {
animation: none;
transition: none;
}
}Why it is built this way
The press is faster than the return on purpose. Asymmetric timing is the whole trick: matching them makes the button feel spongy, while a quick squash and a slower release reads as physical.
What it animates
No keyframes at all — this one is built from interaction states, so the browser only does anything when the visitor does.
What it costs to run
Nothing here runs on a timer. The motion lives entirely in :hover and :active, which compiles to a transition — so it costs nothing until the visitor does something, and it interrupts and reverses cleanly halfway through.
Accessibility
A reader who never triggers :hover and :active never sees this, so it carries no risk on load. Worth adding a :focus-visible state alongside it: as written, a keyboard user gets no feedback at all.