Our site has ended up with a dozen button styles. How many do we actually need?

Three levels of emphasis plus one destructive style has covered every page we have shipped. Primary is the filled button in your brand colour. Secondary is the outlined one. Tertiary is quiet, text with a little padding, no border or a barely visible one. Destructive is red and only exists where an action deletes something or cancels a subscription.

Most marketing sites need three of those four. If nothing on your site destroys data, you do not need a red button, and adding one gives people a style to misuse later.

Twelve styles is not twelve decisions. When we count buttons on a site before rebuilding it, the sprawl is never decorative. It is what happens when a team invents a new style each time an action feels important, instead of ranking the actions against each other.

Every new page needs a button that feels like the most important thing on it. If the existing primary is already used somewhere on that page, the fastest fix is a new colour. Nobody argues, because on that page alone it looks fine.

A pricing page we audited had a filled purple button for “Start free trial”, a filled dark button for “Book a demo”, a green button in the plan card, and a purple outlined button for “Talk to sales”. Four styles, four teams, four sprints. Every visitor arriving at that page had to work out which of four equally loud things they were supposed to do.

So the problem is usually governance and naming, not design. Nobody owns the question of which action is allowed to be primary.

Walk your site and screenshot every button, including hover states, buttons inside modals, and the ones in your forms and cookie banner. Paste them all onto one page.

Then group them by how loud they look, not by what they say. This matters. Teams instinctively group by function, so “Book a demo” and “Request a demo” land together even though one is filled and one is an outline. Grouping by weight is what exposes the real number, and it is usually higher than anyone guessed. In our audits the counted number is typically two to three times what the team estimated before we started. A team saying “about five” ends up with fourteen.

You are looking for near duplicates: two blues four percent apart, the same button at 40px and 44px tall, a border radius that changed when someone shipped a new section.

Before you touch any styles, list your pages and write one action beside each. Not two. One. This is the only genuinely hard part of the job, and it is a business decision, not a design one.

On the pricing page above, the answer was “Start free trial”. That made “Book a demo” secondary and “Talk to sales” a text link in the FAQ. Sales objected, then agreed, because the alternative was continuing to split attention four ways.

If you cannot name one action, the page has a strategy problem that no button style will hide. Two equally weighted calls to action mean you have decided not to decide, and the visitor pays for it.

Assign each remaining button one of four roles, using this rule.

Once a button has a tier, its appearance is no longer negotiable. That is the point. The tier decides the colour, size and radius, so nobody chooses those per page again.

• Primary: the one action you named for this view. Exactly one, filled, highest contrast.
• Secondary: the reversible alternative that a reasonable person might choose instead. Usually outlined.
• Tertiary: everything else that still needs to look clickable, like "See all features" under a grid.
• Destructive: deletes, cancels, disconnects. Red. Almost never on a marketing page.

Most of the styles you kill do not become tertiary buttons. They become plain text links, and your pages get quieter and easier to scan.

The test we use: if the action navigates somewhere and the visitor loses nothing by ignoring it, make it a link. “Read the case study” is a link. “Start free trial” is a button. Footer navigation is links, all of it, however tempting a button looks in a footer column.

One counterexample worth knowing. A form’s submit control is always a button, never a styled link, even when it looks quiet. It has to be a real button element so keyboard and screen reader users can reach it and so the Enter key works.

A surviving variant is not one design. It needs default, hover, focus, disabled and loading. Focus is the visible ring keyboard users need, and disabled needs enough contrast to still be readable while clearly inactive.

Four variants times five states is twenty designs, and each one needs a mobile size too. Twelve variants would be sixty. That arithmetic is the strongest argument for cutting the list: the sprawl is not just ugly, it guarantees that most of your buttons have no focus state and no loading state at all. In practice the ones invented mid-sprint have neither, which is why your forms double-submit.

Button sprawl on its own is not a reason to commission a redesign. A designer and a developer can do the whole job in about a week: a day auditing, a day arguing about primaries, two days building four variants with all five states, and a couple of days replacing the old classes.

The part that keeps it fixed is cheaper still and does not need a designer. Write down the four names, write down the one-primary-per-view rule, and give one person the authority to reject a fifth variant. Sprawl comes back the moment nobody is allowed to say no.

Consider paying for outside help when the same audit turns up the same mess in your spacing, your headings and your form fields. At that point buttons are a symptom, and a design system is the fix rather than a tidy-up. We build every redesign on ours for exactly this reason: the variants are decided once, so the twelfth style never gets a chance to appear.