The 2026 button design guide: states that actually get clicked

A button is a promise

Users don't read buttons, they feel them. A button that takes 120ms longer to respond reads as broken; one that shifts 1px on hover reads as tactile. The fastest way to make a site feel expensive is to make every button feel intentional — and the cheapest way is to give it states.

The five states, and the motion each deserves

• Rest — the baseline. High enough contrast to survive any background; never pure gray on gray.
• Hover — translate up 1px and lift the shadow; 150–200ms ease-out. Resist scale; it feels gimmicky.
• Focus — never remove it. A 2px ring with 2px gap beats a 1px border that vanishes into the background.
• Active — press down 1px, tighten the shadow, 80ms. The click should feel physical, not decorative.
• Disabled — 40% opacity with the cursor changed; never keep a dead button look-alive at full contrast.
• Loading — swap to a spinner or shimmering bar, never a frozen button that swallows clicks.

If your hover has a transition longer than 200ms, it's not a hover, it's an announcement.

Components that do the work for you

Great button systems are built once and reused everywhere. These vault items ship the states, the motion and the reduced-motion fallbacks so you don't have to rebuild them per screen.

The checklist

• Every interactive element has all five states defined?
• Hover/active motion under 250ms?
• Focus ring visible at 2px+ gap 2px?
• Disabled elements use opacity, not a gray that looks clickable?
• Reduced motion strips the transform, keeps the feedback?