Email CTA button: design, copy, and placement

An email without a clear CTA button is a letter that asks nothing of the reader. You wrote the subject line, built the layout, got past the spam filter — and the subscriber reads it and has no idea what to do next. The button is where the whole campaign converges. Its shape, colour, wording, and position determine whether the click happens or doesn’t. Below is what actually matters and what is just decoration.

Why the CTA button is the most expensive element in your email

Every email exists for one reason: to move the reader toward an action. Subscribe, buy, download, register, read more. The button is the physical embodiment of that reason. Everything before it — the subject line, the preheader, the hero image, the copy — is preamble. Everything after it is footnotes.

Campaign Monitor found that button-style CTAs improve click-through rates by 28% compared to plain text links. That tracks: a button gives the eye a landing spot. When a reader skims (most people skim), they look for something that stands apart from everything else. A coloured rectangle with white text is hard to miss.

But “add a button” is not a strategy. A tiny grey rectangle in the footer is technically a button. Nobody clicks it. The gap between a CTA that converts at 2% and one that converts at 8% comes down to specifics: size, colour, text, whitespace, and position.

Size and shape: the 44-pixel rule

Apple’s Human Interface Guidelines set 44×44 points as the minimum touch target. Google’s Material Design says 48×48 dp. Both exist for the same reason: fingers are imprecise. If the tap target is smaller, people miss, hit the wrong thing, and give up.

In practice: your button should be at least 44 pixels tall. Width depends on the label text, but 200–300 px is a common range. Full-width buttons work on mobile but look out of place on a 600-pixel desktop layout. A reasonable middle ground is auto width with generous horizontal padding (30–40 px per side), so the button grows with the label but never collapses below the minimum.

Rounded corners (border-radius 4–8 px) are the current default. Pill shapes draw attention but can clash with squared-off layouts. Sharp corners look dated in most contexts outside formal B2B email. Pick one shape and stick with it across campaigns — the subscriber should recognise your button at a glance.

Colour: contrast over preference

There’s a persistent myth that red beats green, or that orange is the “best CTA colour.” None of that is true in isolation. What matters is contrast against the surrounding design. A red button on a red background is invisible. A green button on a white background with no other green in the email stands out immediately.

The rule is simple: the button should be the most visually distinct element in the email. If your brand palette is blue and grey, make the CTA orange or bright green. If the email already uses several colours, simplify the background and let the button be the only saturated object.

Accessibility adds a hard constraint: text-to-background contrast must be at least 4.5:1 (WCAG AA). White text on a yellow button fails. White text on dark blue passes easily. Run it through WebAIM’s contrast checker before locking the colour.

Dark mode complicates things. Apple Mail, Gmail, and Outlook each handle it differently. Some invert background colours; others leave them alone. Test your button in dark mode explicitly. If the background goes dark and your button colour is also dark, it vanishes. Use the @media (prefers-color-scheme: dark) query where supported, and always add an explicit border as a fallback: even if the fill merges with the background, the outline keeps the button visible.

Button copy: say what happens after the click

“Click here” tells the reader nothing. “Learn more” is vague. “Submit” sounds like homework. Strong CTA labels describe the outcome from the reader’s point of view: what do they get after clicking?

Patterns that work:

• Verb + value. “Get the free template,” “Start my trial,” “Download the report.”
• First person works. “Reserve my spot” outperforms “Reserve your spot” in several A/B tests because it feels like the reader’s own decision rather than a command.
• Keep it short. Two to five words. Anything longer wraps on mobile and loses its punch.
• Skip generic verbs. “Send,” “Go,” “OK” give no information about what the action produces.

Font size on the button matters too. Below 14 px it’s hard to read on mobile. 16–18 px is the right range: legible, confident, doesn’t inflate the button to an absurd height. Use semi-bold or bold weight so the label reads differently from the surrounding body copy.

Placement: above the fold is overrated

The web-design reflex is to push the CTA as high as possible. In email, this backfires when the reader hasn’t been given a reason to click yet. A button before the value proposition is asking someone to act on faith. That works for transactional emails (“Confirm your order”), not for marketing ones.

The natural position is right after the argument that justifies the action. Describe the problem, present the solution, show proof, then place the button. The reader’s mental state at that point is “yes, I want this” — and the button catches that impulse.

For longer emails, repeat the CTA. One after the main pitch, one at the end. Not three, not five — two. Each repetition gives readers who scroll at different speeds a chance to act without scrolling back up. Use the same label both times. Different text confuses the reader about whether this is the same action or a different one.

Whitespace around the button matters as much as the button itself. 20–30 px of padding on all sides prevents the button from competing with neighbouring elements. A button sandwiched between two images with no breathing room becomes visual noise, not a focal point.

One CTA vs. many: the paradox of choice

Hick’s Law: decision time goes up with the number of options. In email this is brutal. The reader already made one decision (to open), and you have seconds before they move on. Each additional button splits attention and reduces the probability of any single click.

The ideal promotional email has one primary CTA. One action, one button, one colour. If you genuinely need a secondary action (“Buy now” and “See full collection”), make the hierarchy clear: primary button in full colour, secondary as a text link or an outlined ghost button. Never give two buttons equal visual weight. The reader won’t choose between them — they’ll choose neither.

Newsletters with multiple articles are an exception. Each article block can have its own link. But even here, one item should be visually promoted as the lead story with a full CTA button; the rest can use text links.

Bulletproof buttons: making them work in every client

Outlook for Windows does not render CSS border-radius. It does not support most CSS background properties on links. If your button is a styled <a> tag with background-color and padding, Outlook shows a bare text link. The button disappears.

The fix is the “bulletproof button” technique: use a <table> with a background colour, wrap the <a> tag inside a <td>, and add VML markup for Outlook via conditional comments. Tools like buttons.cm generate this code automatically. The HTML is ugly, but it renders correctly in every major email client, including Outlook 2016, 2019, and the new Outlook for Windows.

If you use MJML or a similar email framework, bulletproof buttons are handled for you. The framework outputs table-based markup plus VML conditionals. If you code emails by hand, use a generator and test in Litmus or Email on Acid before sending.

Five mistakes that kill click-through rate

1. Image-based buttons. Some designers place the CTA inside a banner image. When images are blocked (Outlook blocks by default; many corporate clients do too), the button vanishes entirely. Always use live HTML text for the CTA label.

2. Invisible buttons on mobile. A button that works on a 1200-pixel screen may shrink to an unreadable size on a 375-pixel phone if the email lacks responsive breakpoints. Test at 320 px width — the smallest common screen.

3. CTA buried after the fold with no context. If the email has a tall image header, the button may sit below the visible area on mobile. Some readers never scroll. Keep the distance from the top of the email to the first CTA under 500 px (roughly two screen heights on a phone).

4. Competing links around the button. A paragraph with three underlined hyperlinks, followed by a button, creates visual mess. The eye bounces between the links and the button, unsure which to click. Remove surrounding links or style them as plain text.

5. Broken tracking links. Your ESP wraps every link in a redirect for tracking. If that redirect is misconfigured or routes through a domain with a bad reputation, the click fails or triggers a browser warning. After setting up a campaign, click the button yourself. Check that the destination loads, UTM parameters are correct, and the redirect doesn’t flag any warnings.

A/B testing CTA buttons: what’s worth testing

Button colour, label text, and position are the three variables that produce measurable differences in CTR. Testing border-radius or drop shadows is rarely worth the effort — the effects are too small to reach statistical significance on typical list sizes.

Test one variable per send. Changing the colour and the text at the same time tells you nothing about which factor moved the needle. Run the winning variant for two or three campaigns, then test the next variable. Over a quarter you’ll build a CTA optimised in three dimensions rather than guessing at all three at once. Minimum sample: 1,000 recipients per variant. Below that, noise drowns the signal. If your list is smaller, track results across multiple campaigns and compare averages over a month.

The CTA is useless if the email never arrived

You can get the button perfect: right colour, tight copy, clean placement. But if the email landed in spam or bounced off an invalid address, nobody saw it. Deliverability comes before design. And deliverability starts with a clean list.

A bounce rate above 2% damages your domain reputation. Spam traps in your list are worse. Invalid addresses also distort CTA A/B tests: you’re comparing the CTR of two button variants, but a portion of your recipients are dead mailboxes that will never click either. The test result is noise, not signal.

List validation takes minutes. Upload your list, get a report showing which addresses are valid, risky, or dead. Remove the junk, and the bounce rate drops, your sender reputation climbs, and emails start reaching inboxes. Only then does optimising the CTA actually move the numbers.

A perfect button in an email that never delivered is a perfect button nobody saw. Fix deliverability first, then design.