A Button Has Seven States. Most Designs Ship Two.

Ask someone to design a button and you'll usually get two versions: how it looks normally and how it looks when the mouse passes over it. That covers the moment before someone clicks. It says nothing about what happens when they do, or when they arrive with a keyboard, or when the button can't be used yet.

We design seven states for every button. Most of them are seen for less than a second, and that's exactly why they get forgotten.

Default and hover

The default state needs to look clickable without help: a clear shape, enough contrast and a label that says what it does. Hover adds a small change, such as a slightly darker colour, to confirm the pointer is in the right place. It's a nice touch on desktop, but it can't carry any important information, because touch screens don't have hover.

Focus

The focus state shows which element is selected when someone moves through a page with a keyboard. Many sites remove the browser's default focus outline because someone thought it looked untidy, and never replace it. For keyboard users, that makes the page impossible to navigate.

We design a focus style that fits the brand and is clearly visible against every background the button sits on. It's one of the most important states and one of the most often missing.

Active

The active state is the moment the button is pressed. A slight shift in colour or a small press-in effect tells people their tap or click registered. Without it, buttons can feel dead, especially on touch screens where there's no physical click.

Disabled

A disabled button shows that an action isn't available yet. It needs to look clearly unavailable while staying readable, which is harder than it sounds. Grey on grey often fails contrast checks and leaves people unsure whether the button is broken.

We also ask whether the button should be disabled at all. A disabled submit button on a form doesn't explain what's missing. Often it's better to leave the button active and show helpful errors when it's pressed.

Loading

When an action takes time, such as sending a form or processing a payment, the button needs to show that something is happening. We usually add a small spinner and stop the button being pressed again, so people don't submit twice. The button keeps its size, so the layout doesn't jump.

Error and success

Sometimes the action fails. The connection drops or the server returns an error. The button, or the area around it, needs to say so and offer a way to try again. Equally, a brief success state, such as a tick or "Sent", confirms the job is done before the page moves on.

Why the full set matters

Each of these states is small. Together, they decide whether a product feels solid. A button that does nothing visible when pressed makes people tap again. A missing loading state leads to duplicate orders. A missing focus state shuts out keyboard users entirely. People rarely notice when these are done well, and they always notice when they aren't.

Designing once

Designing seven states for every button would be tedious if we did it button by button. We don't. We design the states once for each button style in the system, and every button inherits them. Developers build them once as a component, and every new screen gets them for free. It's part of the groundwork in our website design and build and app development projects.

Before calling a design done, we tab through it with a keyboard, press every button on a slow connection and try to break things. If your product feels slightly flimsy and you can't say why, the missing states are a good place to look. Get in touch.