What is a CTA button? Designing a good call to action

In short

CTA stands for call to action. It is the element on a screen that carries the step the user should take: “Add to cart”, “Request a quote”, “Create account”.

Four things define a CTA button: its text, its weight on the screen, its size and its position. Colour matters too, but not for the reason people think. I explain why below, with the myth of the “red button”.

Buttons are for actions. Jakob Nielsen's rule is clear: don't use buttons for navigation; use links to move between pages.

Button text: action and object

The button text says what happens on press. Anna Kaley of NN/g recommends that commands start with a verb or verb phrase that describes what happens. If the verb alone is unclear, add an object: “Delete folder” instead of “Delete”.

In English, buttons usually start with the verb: “Delete folder”, “Save address”, “Add to cart”. The rule stays the same: write the action and what it applies to.

Kaley limits the text to 2 to 4 words. Nielsen also asks for short button labels of no more than 4 words. Apple's example points the same way: “Add to Cart” for a button that puts an item in the cart.

Instead of	Write	Why
Click here	Download the catalog	What happens is clear.
Submit	Request a quote	Says what the user gets.
OK (delete confirmation)	Delete address	An “OK” pressed without reading costs data.
Next	Continue to payment	The next step has a name.

Don't use “OK” in confirmation dialogs. According to Kaley, users press it out of habit, without reading. Nielsen also recommended in 2008 giving buttons names such as “Save” that say what they do.

The GOV.UK Design System requires button text to describe the button's action. Its example is “Save and continue”: if the service saves the details, use that label, otherwise just “Continue”. According to Kaley, a command that appears in several places should have the same text and a similar position everywhere.

On buttons I skip the full sentence: “Add to cart”, not “Add this item to your cart”. Even when the rest of the copy speaks to the reader, the short form wins on the button. For the rest of the microcopy, see the guide to UX writing.

Visual hierarchy: primary and secondary buttons

A screen has one main action, and it is the most prominent button. GOV.UK says it plainly: avoid more than one main button per page. The reason: several main actions weaken each one and make it hard to know what to do next.

Apple also limits prominent buttons to one or two per view. Many prominent buttons raise cognitive load, and the user thinks longer before choosing.

• Place order

  Primary. The screen’s main action. Filled and most prominent. There is one per screen.

• Back to cart

  Secondary. A valid but less often chosen path. Outlined, no fill.

• I have a promo code

  Tertiary. A rarely used action, or one that leads to another page. Shown as a link.

The secondary action doesn't disappear; it steps back. According to Nielsen, the most frequently chosen button should be the default and be highlighted. In his article on command links he reserves links for secondary commands.

There is one exception: a dangerous action doesn't become primary. According to Apple, people sometimes choose the prominent button without reading. So an action that deletes data doesn't get the primary role, even if it is the most likely choice.

The CTA lab

On the product card below, the button fails all three checks. Change text, hierarchy and size, and the checklist updates with each choice.

CTA lab

Preview

Ground coffee, 12 oz

Example product card

Click here Save for later

Button height: 28 px

• ✗Failed: Text. The text doesn’t say what happens. “Click here” is true of every button, so it describes none.
• ✗Failed: Hierarchy. Both buttons have the same weight. The user has to work out which one is the main action.
• ✗Failed: Size. Height 28 px. Above the WCAG minimum of 24 pixels, but below Apple’s 44 pt rule.

The button in this example fails all three checks. With JavaScript you can change text, hierarchy and size to fix it.

The product card and the sizes are my example, not from a real store. Make a choice and the preview and checklist change together. You can also move between options with the arrow keys. The buttons in the preview can't be pressed; they only show the look.

Size and tap area

The button has to be big enough to hit comfortably with a finger. Apple's general rule is a tap area of at least 44 × 44 pt. On the web, WCAG 2.2 asks for at least 24 × 24 CSS pixels at level AA.

WCAG allows targets below that limit with a spacing exception. For the main action I never rely on that exception. The CTA is the element on the screen that should be pressed most often.

Visible size and the pressable area are two different things. You can enlarge the area with CSS without changing the look.

Position: where the button goes

The CTA comes right after the information the user reads to decide. On the product page it sits next to price and options, in a form under the last field. In forms, GOV.UK recommends aligning the main button to the left edge of the form.

When two or more buttons sit side by side, arrange them as a group. GOV.UK has a separate button group component for this. Links in the group sit on the same line as the buttons.

The order of “OK” and “Cancel” depends on the platform. According to Nielsen, Windows puts the confirmation first and Apple puts it last. He recommends following the platform owner's rule. Breaking the standard costs users time, according to Nielsen.

On mobile product pages I often fix the main button to the bottom of the screen. That way the action doesn't disappear while scrolling. But this fixed bar must not cover the content. For buttons in the checkout steps, see the checkout pattern.

Colour and contrast

The text on the button has to be readable, and the button has to stand out from its surroundings. Criterion 1.4.3 of WCAG 2.2 asks for at least 4.5:1 contrast for normal text and at least 3:1 for large text. Large text means 18 point, or 14 point bold.

Criterion 1.4.11 asks for 3:1 for controls. A border isn't required on a button with text. But if the edge is needed to recognise the button, that edge has to reach 3:1, and so does the focus indicator.

Disabled buttons are exempt from the contrast rule. GOV.UK still warns that disabled buttons have low contrast and confuse some users. Instead I keep the button active and show the missing field with an error message.

To check two colours yourself, use the contrast checker.

The myth that “a red button converts better”

A story circulates in marketing copy: on one site a red button beat a green one by a certain percentage. The HubSpot address where the story first appeared now redirects to a different article. Because I couldn't open and read the original text, I don't give that number here.

Even if the number is true, it gives no general rule. It is a test on a single page, with that page's colours. On another page the same colour can reverse the result.

There is an example with an open source. In HubSpot's collection of A/B tests, Expoze.io's home page was hard to read for some users because of low contrast. The team redesigned the background. The CTA button stayed the same, but clicks on the CTA rose by 25%. The team attributes this to the extra contrast on the page.

That is the team's own interpretation. The author also reminds readers that the same tests don't give everyone the same result. My lesson: choose the colour because it contrasts with its surroundings, and check it on your own site with an A/B test.

My note

The CTA mistake I see most often in audits isn't the text, it's the crowding. In the hero, “Get started”, “Request a demo” and “See pricing” sit side by side with the same filled button. The team thinks all three matter; the user can't decide on any.

Before I draw a screen, I write the text of its main action. If I can't write it, it hasn't been decided what the screen is for. The other buttons come after that sentence and stay secondary.

If you want an outside eye on your product's CTAs, the UX Audit also looks at button text and hierarchy. If you're building a landing page, the landing page pattern describes where the CTA goes on the page.

Checklist

1. The button text has an object and an action, 2 to 4 words.
2. Confirmation dialogs name the action instead of saying “OK”.
3. There is one primary button on the screen; the others are secondary or links.
4. An action that deletes data isn't on the primary button.
5. The tap area is at least 44 pt on mobile and at least 24 CSS pixels on the web.
6. Text contrast is at least 4.5:1, and the button's edge at least 3:1 where it is needed.
7. The same action has the same text and a similar place on every screen.