What Is Button Hierarchy?
Button hierarchy is styling buttons with different visual weights, primary, secondary, and tertiary, so users can instantly tell which action is most important on a screen. The primary button is the boldest and marks the main thing you want people to do, like Buy now or Sign up. Secondary buttons are quieter alternatives, and tertiary buttons are the most subdued, often plain text links. Clear button hierarchy guides the eye to the desired action and prevents the confusion of a screen where every button competes equally.
- What it is
- Ranking buttons by visual weight so the main action stands out
- Three tiers
- Primary (boldest), secondary (quieter), tertiary (most subtle, often a text link)
- Guiding rule
- Usually one primary button per view, so the main action is unambiguous
- How it works
- Uses colour, fill, contrast, and size to create visual weight (Nielsen Norman Group)
- Accessibility
- Never rely on colour alone; keep contrast high and labels clear (WCAG 2.2)
What button hierarchy actually is #
Button hierarchy is the deliberate styling of buttons at different visual strengths so that a glance tells the user which action matters most. On any given screen there is usually one thing you most want a visitor to do, buy the product, submit the form, start the trial, and the primary button is styled boldly to draw the eye straight to it. Less important actions get quieter treatments: a secondary button for a reasonable alternative, and a tertiary style, often a plain text link, for minor or low-stakes actions like Cancel. The effect is a clear visual ranking that removes guesswork. Without hierarchy, a screen where every button looks identical forces users to stop and read each one, slowing them down and diluting the main goal. Establishing this order is a core part of interface design, and it is central to the usability thinking on our /services/ui-ux-design page, where guiding attention deliberately makes products easier and faster to use.
Primary buttons and the main action #
The primary button represents the single most important action on a screen, and its styling should make that unmistakable. It typically uses the strongest treatment available: a solid fill in a prominent brand colour, high contrast against the background, and enough size and presence to stand out from everything around it. Crucially, most screens should have only one primary button, because the moment two equally bold buttons compete, the hierarchy collapses and users hesitate over which is the real next step. The primary button answers the question if I do one thing here, what should it be? On a checkout page that is Place order; on a signup form it is Create account. Making the desired action visually obvious reduces friction and lifts the rate at which people complete it, which is exactly the kind of improvement we target on our /services/conversion-optimization page, where clarifying the primary action on key screens is one of the highest-impact changes a business can make.
Secondary and tertiary buttons #
Below the primary button sit the quieter tiers, and they exist to offer alternatives without stealing attention. A secondary button is a legitimate but less-preferred option, styled with less weight, commonly an outline or a muted fill rather than the bold primary colour. It says you could also do this, without shouting. Tertiary actions are quieter still, often rendered as a simple text link or a very low-emphasis button, and they suit minor or reversible actions like Cancel, Back, or Learn more. Getting these tiers right matters because they let a screen offer several choices while still making the recommended path obvious. The mistake is over-emphasizing a secondary action, for example styling Cancel as boldly as Save, which creates a tie and confuses users. Designing these graded options so they support rather than compete with the main action is part of the careful interface work our team applies on our /services/web-design page across every screen we build.
Building button hierarchy in CSS #
Button hierarchy is expressed through consistent CSS classes that map to each tier. The primary button gets the boldest treatment, the secondary a lighter one, and the tertiary the most subtle. Here is a compact, accessible example.
.btn { padding: 0.6rem 1.2rem; border-radius: 6px;
font-weight: 600; cursor: pointer; }
/* Primary: boldest, one per view */
.btn-primary { background: #1a56db; color: #fff;
border: 2px solid #1a56db; }
/* Secondary: quieter alternative */
.btn-secondary { background: transparent; color: #1a56db;
border: 2px solid #1a56db; }
/* Tertiary: most subtle, link-like */
.btn-tertiary { background: none; color: #1a56db;
border: none; text-decoration: underline; }
/* Accessible focus for all tiers */
.btn:focus-visible { outline: 3px solid #1440a8;
outline-offset: 2px; }How visual weight creates the ranking #
Button hierarchy works because of visual weight, the perceived heaviness of an element that determines how strongly it pulls the eye. Several levers create it. Colour and fill are the biggest: a solid, saturated fill reads as heavier than an outline, which reads as heavier than plain text. Contrast against the background amplifies this, a high-contrast button jumps forward while a low-contrast one recedes. Size and padding add weight too, though changes here should be modest so buttons still feel like a set. By combining these levers consistently, designers produce a clear order, primary heaviest, tertiary lightest, that users read instantly and unconsciously (Nielsen Norman Group). The skill is using just enough differentiation to make the ranking obvious without making the quieter buttons feel broken or invisible. This understanding of how visual properties direct attention underpins much of the layout work on our /services/web-design page, where controlling where the eye goes is as important as what is on the screen.
Accessibility in button hierarchy #
A button hierarchy must stay accessible, because the same tools that create emphasis, colour and contrast, can exclude people if used carelessly. The key rule is never to rely on colour alone to distinguish tiers, since colour-blind and low-vision users may not perceive the difference; combine colour with other cues like fill, border, and label clarity so the ranking survives without colour (WCAG 2.2). Every button, including quiet tertiary ones, needs sufficient text-contrast to be readable, and interactive targets should be large enough to tap comfortably. Buttons must also carry a visible focus state so keyboard users can see which one they are on, and their labels should describe the action clearly rather than relying on position or style to convey meaning. A tertiary text link still needs to be obviously interactive. Keeping hierarchy legible for every visitor is part of the inclusive design covered on our /services/ada-compliance page, where visual emphasis and accessibility are balanced together.
Common button-hierarchy mistakes #
The most common mistake is having no hierarchy at all, styling every button identically so the screen offers a wall of equal-weight choices and users cannot tell which action is primary. The opposite error is too many primary buttons, where several bold buttons compete and the emphasis cancels out. Over-styling a destructive or cancel action, making Delete or Cancel as prominent as the safe main action, invites mistakes. Some designs make tertiary actions so subtle they become invisible, so users miss useful options entirely. Relying on colour alone to distinguish tiers fails colour-blind users, and forgetting focus states leaves keyboard users unable to see which button is active. Inconsistent styling across pages, where a primary button looks different from screen to screen, also erodes the learned hierarchy. Each of these confuses users and weakens the main action. Catching such issues across a live site is part of the practical review we offer free at /free-website-audit.
Consistency across a whole site #
Button hierarchy only delivers its full value when it is consistent across every page, not just perfected on one screen. If the primary button is a solid blue on the homepage but an outlined green on the contact page, users lose the learned shorthand that tells them at a glance which action is primary, and the interface feels disjointed. A design system solves this by defining the button tiers once, primary, secondary, tertiary, as reusable components with fixed styles, then reusing them everywhere. That way a primary button always looks and behaves the same, wherever it appears, and users build reliable intuition about what to click. Consistency also speeds up development and makes the site easier to maintain, since a change to the button style updates every instance at once. This systematic approach, where components are defined centrally and applied uniformly, is part of how our team keeps interfaces coherent from page to page on our /services/web-design page, so the hierarchy users learn on one screen holds true across the entire site.
Best practices and our recommendation #
Give each screen one clear primary button for the action you most want people to take, and style it boldly enough to stand out at a glance. Use secondary buttons for reasonable alternatives and tertiary styles, often text links, for minor or reversible actions, keeping quieter tiers genuinely quieter so they support rather than compete. Apply the styles consistently across the whole product using shared classes, so users learn the hierarchy once and trust it everywhere. Never rely on colour alone to signal importance, keep contrast high, add visible focus states, and write labels that describe the action clearly. Be especially careful not to over-emphasize cancel or delete actions. Done well, button hierarchy quietly steers users toward the right action and reduces the hesitation that costs conversions. If you want screens where the main action is always obvious and every button stays accessible, our /services/ui-ux-design and /services/conversion-optimization teams design and test button hierarchy as a core part of interface work.
FAQ
What is button hierarchy?
Button hierarchy is styling buttons at different visual weights, primary, secondary, and tertiary, so users can instantly see which action matters most. The primary button is boldest and marks the main goal, while secondary and tertiary buttons are progressively quieter. This ranking guides the eye and reduces the hesitation of a screen where every button looks the same.
What is the difference between primary and secondary buttons?
A primary button represents the single most important action and uses the boldest styling, usually a solid, high-contrast fill. A secondary button is a legitimate but less-preferred alternative, styled more quietly, often as an outline or muted fill. The contrast between them tells users which path is recommended without any extra explanation.
How many primary buttons should a page have?
Usually just one per view or key section. A single primary button makes the main action unambiguous. When two or more equally bold buttons compete, the hierarchy collapses and users hesitate over which is the real next step. Additional actions should use quieter secondary or tertiary styles instead of a second primary treatment.
How is button hierarchy created?
It is created with visual weight, mainly colour and fill, contrast against the background, and, more subtly, size and padding. A solid, saturated fill reads as heavier than an outline, which reads as heavier than plain text. Combining these consistently produces a clear order from primary down to tertiary that users read instantly.
Is button hierarchy an accessibility concern?
Yes. Never rely on colour alone to distinguish tiers, since colour-blind and low-vision users may not perceive it. Combine colour with fill, borders, and clear labels, keep text contrast high, use comfortably sized targets, and give every button a visible focus state so keyboard users can see which one they are on.
What is a tertiary button?
A tertiary button is the quietest tier, used for minor or reversible actions like Cancel, Back, or Learn more. It is often styled as a plain text link or a very low-emphasis button so it stays available without drawing attention away from the primary action. It should still look clearly interactive to users.
How Local Web Advisor checks this for you
Is your own website getting web design right?
Our free AI audit scans your site and tells you — in plain English — exactly what to fix for web design and seven other areas, with the business impact and the fix for each. No login needed to start.
Run my free website audit →Was this helpful?