Button Press

Real buttons depress. Digital ones can borrow the effect with one line: scale down slightly while pressed. It's the cheapest haptic feedback the web has.

Press meMe too

scale

0.97

Around 0.97 the button feels tactile without looking springy. Past 0.9 it starts feeling like a toy.

The recipe

.button {
  transition: transform 100ms ease-out;
}
.button:active {
  transform: scale(0.97);
}

• 0.97 is the sweet spot. Enough to feel, not enough to see as an effect. Emil Kowalski's rule of thumb: if the user notices the animation itself, it's too much.
• Keep it fast. ~100ms down. The release can ride the same transition.
• Scale the whole button, not the label — transform runs on the compositor, so it's free.

Two warnings

Never animate entrances from scale(0) — elements growing from nothing look cartoonish; start at 0.95 and fade. And skip the effect on controls triggered from the keyboard: a button that dips when nobody's finger is on it feels haunted.