Buttons people actually press: hierarchy and states

Buttons are where a website asks someone to do something. Book, buy, send, subscribe, download. Everything else on the page builds up to these moments, so it is worth getting the buttons themselves right: what they look like, what they say, how they relate to each other and how they respond when someone interacts with them.

A good button is obvious, honest about what it does and reassuring when pressed. Here is how to design them that way.

Start with hierarchy

Most screens contain more than one action, but they are rarely equally important. A product page might offer "Add to basket", "Save for later" and "Size guide". If all three look identical, the visitor has to stop and decide which matters. If one is clearly dominant, the decision is made for them.

A simple three-level hierarchy covers most needs.

Primary buttons

The primary button is for the single most important action in a given area. It is the most visually prominent: a solid fill in your accent colour, with high-contrast text.

The key rule is restraint. Aim for one primary button per section, and ideally one main one per screen. When a page has five solid, brightly coloured buttons, none of them stands out.

Secondary buttons

Secondary buttons are for useful but less important actions. They are typically outlined (a border in a dark neutral or your primary colour, with a transparent or white background) or filled with a soft, light tint. They look clearly clickable, but quieter.

On a booking form, "Confirm booking" might be primary while "Change date" is secondary.

Tertiary actions

Tertiary actions look like text links, sometimes with an icon. "Cancel", "Skip for now" and "View details" often belong here. They are present for those who need them without competing with the main path.

Destructive actions

Actions that delete or cancel something important deserve their own treatment, often using your error colour. Keep them visually separate from the primary path, and for anything irreversible, ask for confirmation.

Write labels that describe the result

The text on a button matters as much as its colour. A good label tells the visitor exactly what will happen when they press it.

• "Book my appointment" is better than "Submit".
• "Download the price list" is better than "Click here".
• "Send message" is better than "Go".
• "Start free trial" is better than "Get started", if a trial is what actually starts.

Use verbs, and keep labels short, usually two to four words. Use sentence case (only the first word capitalised) for a friendlier, easier-to-read feel; all-capitals labels can look shouty and are slightly harder to read.

Make labels consistent across the site. If a button says "Request a quote" on the home page, it should not say "Get pricing" on the services page for the same action.

Make them look like buttons

Flat, minimal styles can sometimes make buttons hard to recognise. Whatever your style, a button should be identifiable at a glance. Things that help:

• A clear shape. A filled or outlined rectangle, with or without rounded corners.
• Comfortable padding. Text should have room around it. Cramped buttons look cheap and are harder to hit.
• A sensible size. For touch screens, a target of at least around 44 by 44 pixels is a widely used guideline. In practice, a height of 44 to 48 pixels suits most buttons.
• Consistency. All primary buttons share the same shape, colour and type style. The visitor learns the pattern once.

Keep corner radius consistent across buttons, inputs and cards. Mixing sharp and heavily rounded corners on the same page looks unplanned.

Design every state

A button is not a single image. It changes as people interact with it, and each change gives feedback. Many sites design only the default state and leave the rest to chance. Cover these:

Default

The resting appearance. This is what most people think of as "the button".

Hover

When a mouse pointer moves over it. A slightly darker or lighter shade of the fill, or a subtle shift in the outline, confirms that it is interactive. Keep the change gentle and quick. Remember that touch screens have no hover, so the button must look clickable without it.

Focus

When someone reaches the button with the keyboard. A clearly visible focus ring (an outline, often offset by a couple of pixels, in a colour that contrasts with the background) is essential for people who navigate without a mouse. Never remove focus styles without replacing them.

Active or pressed

The moment of pressing. A slightly darker shade or a tiny downward shift makes the button feel physical and responsive.

Loading

After pressing, if the action takes a moment, show it. Replace or accompany the label with a small spinner or a short message such as "Sending...", and prevent repeated presses. Without this, people often press again, which can mean duplicate orders or messages.

Disabled

When an action is not yet available, such as a "Continue" button before a required field is filled. Disabled buttons are usually shown faded. Use them carefully: a greyed-out button with no explanation can be frustrating. Where possible, let the visitor press it and then explain what is missing, or show a short note beside it.

Success or error

After the action completes, confirm what happened. A message like "Message sent. We'll reply within one working day" near the button, or a clear error explaining what went wrong and how to fix it, closes the loop.

Placement and grouping

• Put the primary action where the eye ends. At the end of a form, after the last field, aligned with the fields above.
• Group related actions. "Save" and "Cancel" belong together, with the primary one visually dominant.
• Be consistent about order. Pick an order for paired buttons and stick to it throughout the site.
• Leave space around important buttons. A primary button crowded by links and icons loses its pull.

An example in words

Imagine a piano teacher's enquiry form. At the bottom, a solid button in the site's accent colour reads "Send enquiry". To its left sits a quiet text link: "Call instead". When a visitor hovers, the button darkens slightly. When they tab to it, a clear outline appears. When they press, the label changes to "Sending..." with a small spinner and the button stops responding to further clicks. A moment later the form is replaced by a calm confirmation that explains when the teacher will reply.

Nothing is flashy, but every moment answers the visitor's unspoken question: did that work?

Button checklist

• One primary button per section, in your accent colour.
• Secondary and tertiary styles are clearly quieter.
• Labels describe the result using a verb, in sentence case.
• Buttons are at least around 44 pixels tall on touch screens.
• Default, hover, focus, active, loading and disabled states are all designed.
• Focus rings are visible and contrast with the background.
• Loading states prevent double submissions.
• Success and error messages confirm what happened.
• Placement and order are consistent across the site.

Buttons are small, but they carry the weight of every decision a visitor makes on your site. Make them clear, honest and responsive, and people will press them with confidence.