Entry 03

Press feedback

Use it on every button and anything else that can be pressed.

Press and hold a button. It shrinks the moment you press, label and all, and eases back when you let go. With Reduce Motion on it still shrinks, with no easing.

Code CSS · 5 lines

.button:active { transform: scale(0.97); }

@media (prefers-reduced-motion: no-preference) {
  .button { transition: transform 160ms var(--ease-out, ease-out); }
}

Why it works, the rules and the credits 2 reasons · 3 rules · support · credits

Why it works

A native button responds the instant a finger lands. :active does the same on every kind of input. Feedback that waits for click arrives when the finger leaves, and that reads as lag.
scale() shrinks the label and icon along with the button, so the whole control reads as pressed.

Rules

Keep the scale between 0.95 and 0.98.
The reset removes the browser's tap highlight. Without this entry a tap gives no feedback at all.
When feedback needs a script, listen for pointerdown, not click.

Support

Every browser.

Credits

Borrowed from: Emil Kowalski, emil-design-eng skill and mobile-native skill