Button Press

A real button moves when you push it. A button on screen can borrow that with one rule: scale it down a little while it is pressed. It is the cheapest feedback the web has, and it makes an interface feel like it heard you.

Press and hold both buttons below.

Wrong

Right

The one on the right is not doing much. It shrinks to 97% for as long as your finger is down, then springs back to full size. The difference is easy to feel and hard to see, which is exactly what you want from press feedback.

Finding the amount

Two numbers matter: how far the button shrinks and how quickly it gets there. Drag the sliders and keep pressing.

Scale0.97

Duration100ms

Around 0.97 the press reads as tactile. Past 0.92 it starts to look like an effect, and the reader notices the animation instead of the click. Keep the duration around 100ms. Longer than that and the button lags behind your finger, which feels worse than no feedback at all.

Scale runs on the compositor, so this costs nothing at runtime. Because scale() also scales the children, the label and icon move with the button and nothing needs a second rule.

Not just buttons

Anything you can press deserves the same treatment: cards, list rows, tiles, chips. Toggle the feedback on and press the tiles.

Larger surfaces can take a smaller amount. A full-width card at 0.97 moves several pixels at the edges, which is more than a button does at the same scale. Try 0.98 and judge by eye.

Usage

app.tsx

<button class="transition-transform duration-100 ease-out active:scale-[0.97]">
    Save changes
</button>

.button {
  transition: transform 100ms ease-out;
}

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

Transition transform only, not all. A button usually also changes color on hover, and you do not want the press timing to leak into that.

Finding the amount

Not just buttons

Usage

Resources

Search concepts