Call to action button design: one primary action, a clear verb, the right moment
A call to action works when the visitor can see what it does, trusts what happens next and meets it at the moment they're ready. That comes down to three decisions: one primary action per view, a label that starts with a verb, and placement after the information someone needs before acting.
One primary action per view
Most call to action button design problems start before colour or shape. When a hero holds “Book now”, “Learn more”, “See pricing” and “Join the newsletter” as four equal buttons, none of them wins. Decide which single action matters most on each screen and make it the only filled button. Secondary options can exist, but as outlined buttons or plain text links, so the difference in weight shows the priority. On a restaurant site the primary action might be “Book a table” and the secondary “See the menu”; on a plumber's site, “Call now” and “Get a quote”.
Writing the label
| Vague | Specific | Why it's better |
|---|---|---|
| Submit | Send message | Says what the button does |
| Learn more | See the full menu | Says where it goes |
| Get started | Book a free 20-minute call | Says what you get and what it costs in time |
| Sign up | Get the Friday newsletter | Says what the visitor receives |
| Buy | Buy the 250 g bag | Confirms the choice |
| Click here | Download the price list (PDF) | Makes sense out of context and warns about the file |
Start with a verb, keep it to two to five words, and use the visitor's language rather than yours. If there's a reassurance people need, such as no card required, cancel any time or a reply within a day, put it in a short line next to or under the button rather than inside it.
Placement: after the facts, not before
A button works best where the visitor has just learned enough to act. In the hero, that's after the headline and one line explaining the offer. Further down, it's after the prices, after the service list, after the reviews. Repeating the same primary action at these natural decision points is fine; scattering different actions in every section isn't. A sticky booking bar on phones can help for businesses where booking is the whole point, as long as it's small and doesn't cover content.
Visual design of the button
- Colour reserved for actions. Pick one accent colour and use it only for buttons and links. When the same colour also decorates headings and icons, the button loses its signal.
- Contrast. The label needs 4.5:1 against the button fill, and the button itself should stand out from the background (at least 3:1 for its boundary).
- Size. At least 44px tall with comfortable horizontal padding (around 20px to 32px). Full width on phones is fine for the main action in a form.
- Shape by role. Give buttons a consistent shape that differs from cards and inputs, for example pill-shaped or square, used everywhere.
- States. Hover, focus, pressed and disabled should each look different. A hover that only fades the opacity looks unresponsive; change the fill or border instead, and make focus visible with an outline.
What colour should it be?
There's no single colour that works best on every site; what matters is contrast with the surroundings and consistency. A colour that comes from the business itself (the shopfront paint, the product, the logo) and appears nowhere else on the page will stand out naturally. See CTA button colour for choosing one, and accent colour in web design for keeping it scarce.
CTA design and accessibility
Use a button for actions on the page (submitting a form) and a link for navigation (going to the booking page), even if they look alike, because assistive technology announces them differently. Labels should make sense read alone, since screen reader users often list all links and buttons on a page. If a button opens a new tab or a file, say so in the label or next to it.
Action colours in Anticode
Each of Anticode's seven design systems uses one action colour, reserved for actions such as the main buttons and links. You can choose it in the visual editor from red, orange, gold, green, teal, blue, pink or black, and the system keeps it for actions while type and surfaces stay neutral. Buttons get their shape from the system's radius rules (square in Swiss and Brutalist, pill-shaped in Editorial, Playful and Organic), and the Critic flags hover states that only fade opacity.
The labels come from the brief and the kind of site: a booking site's main action is about booking, a store's about buying. Edit any label in place in the visual editor if it isn't specific enough. For copy help, see how to write a call to action.
Questions people ask
How many calls to action should a page have?
One primary action, repeated at natural decision points if the page is long, plus a small number of secondary ones styled more quietly.
What should a CTA button say?
A verb and its object, in two to five words: “Book a table”, “Get a quote”, “Send message”. It should make sense on its own.
How big should a CTA button be?
At least 44px tall, with enough padding that the label doesn't feel cramped. On phones the main button can span the full width.