Buttons scale on press
Scale pressables to 0.97 on :active, 160ms ease-out.
Emil Kowalski@emilkowalskiAn easy way to make your interface feel more responsive is to add a subtle scale down effect when a button is pressed. A scale of 0.97/0.98 scale on the :active pseudo-class with a ~150ms transition should do the job.
Emil Kowalski7 Practical Animation TipsA scale of 0.97 on the :active pseudo-class should do the job
From emil-design-eng; demo 1 rebuilds his Paste pill post.
No press, 0.97, and 0.85
Hold each Paste down to compare.
No pressBad
/* no :active */scale(0.97)Good
scale(0.97) · 160ms ease-outscale(0.85)Overdone
scale(0.85) · 160ms ease-out.button {
transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.button:active:not(:disabled) {
transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.button { transition: none; }
.button:active { transform: none; }
}Find where it turns mushy
Pick a scale, then press the button.
Your buttonIn range
scale(0.97) · 160ms ease-out
-0.6px / side
Same 0.97, three transitions
Hold each button, then let go.
No transitionSnaps
transition: none160ms ease-outGood
transform 160ms var(--ease-out)400ms ease-inLags
transform 400ms ease-inWhy it matters, pros and cons
Why it matters
A click fires on release; the press answers on pointerdown.
Pros
- Feedback before the click fires.
- Transform only: no layout, no repaint.
- Works on buttons, chips, cards, rows.
Cons
- Below 0.95 it reads as a collapse.
- Large cards move more: use 0.98 to 0.99.
- Drop the scale under reduced motion.