← Notes

Button press

22 September 20261 min readMotion · CraftDraft

A press is the interface saying it heard you. It is the most frequent piece of feedback in a product and it should be nearly invisible.

`transform: scale(0.96)` on `:active`, with a 100–160ms transition on transform. Scale takes the label and the icon with it, which is what makes it read as a physical press rather than a colour change. Below 0.95 feels exaggerated. `:active` is a real press on touch, so no hover gating is needed here; hover styling is gated separately.

  • scale(0.96), never below 0.95
  • 100–160ms, ease-out, as a transition not a keyframe
  • Static cue as well: a pressed control also changes surface or ink, so the feedback survives without motion
The whole story / 0 chapters

Button press

Choose a chapter. Your reading position stays here until you do.