Button States Generator
Pick a brand color and see all six interactive button states – default, hover, active, focus, disabled, and loading – with WCAG contrast ratios and ready-to-use CSS.
Default
Rest state
#3B82F6text #111827Hover
Cursor over element
#156BF4text #FFFFFFActive / Pressed
Mouse down or tap
#0A58D6text #FFFFFFFocus
Keyboard · WCAG 2.4.11
#3B82F6text #111827ring #3B82F6· vs white 3.7:1Disabled
Not interactive
#3B82F6text #111827opacity: 50%Loading
Async in progress
#3B82F6text #111827Why Button States Matter
A button is not a single visual element – it's a contract between your interface and the user. Each interaction state communicates whether the action is available, what will happen next, and whether the system is responding. Missing a state is a usability failure, not an aesthetic choice. A button without a visible focus state actively harms keyboard and switch-device users. A button without a loading state leaves users guessing whether their click registered.
WCAG 2.1 AA requires a minimum 4.5:1 contrast ratio for normal text on interactive elements. WCAG 2.4.11 (Focus Appearance, added in WCAG 2.2) requires a visible focus indicator of at least 3px around the component perimeter, with 3:1 contrast against the adjacent background. The focus ring color and the outline offset both matter. A 2px focus ring at 1px offset often fails this criterion even when the colors look fine to the eye.
The hover and active states serve a different purpose: they provide physical feedback. The hover darkens the button by 5–10% to signal "this element is clickable." The active/pressed state darkens a further 8–10% to simulate a physical button being pressed down. These small luminance changes create a sense of depth and responsiveness that flat design loses without them. Skipping these states makes buttons feel dead – technically functional, but missing the tactile feedback that builds user confidence.