Call to action design — the buttons, links, and prompts that ask visitors to take the next step — is the final design decision between interest and conversion. In the US, UK, Canada, and Australia, most business websites have a weak call to action as their most addressable conversion problem. The headline communicates, the content convinces, the trust signals reassure — and then a small, grey "Contact Us" button buried in the footer fails to capture the lead. The research on CTA design is clear: the right button copy, colour, size, and placement can improve conversion rates by 20–200% compared to default or careless implementations.
This guide covers the specific design and copy decisions that produce high-converting calls to action for business websites, landing pages, and ecommerce stores.
What Is a Call to Action?
A call to action (CTA) is any element that prompts a visitor to take a specific action. It can be a button, a text link, a form, or a banner. In web design, "CTA" most commonly refers to the primary conversion button on a page — "Book a Discovery Call", "Add to Cart", "Start Free Trial", "Get a Quote."
Every page on a website should have a primary CTA — a single, clearly identified next step. Pages without a clear primary CTA rely on visitors knowing what to do next, which most do not. Pages with too many competing CTAs produce decision paralysis that reduces conversion below pages with a single clear action.
What CTA Copy Converts Best?
CTA copy is the single highest-impact variable in CTA design. The rule: use action language that describes what happens next, not what the button is.
High-converting CTA copy:
- "Book My Free Discovery Call" — specific, personal, describes what happens
- "Download the Brand Audit" — specific, value-led
- "Get My Free Quote" — benefit-led, first person
- "Start a Project" — active, clear
- "See the Full Case Study" — transparent about what happens on click
Low-converting CTA copy:
- "Submit" — describes the mechanical action, not the value
- "Click Here" — meaningless without context
- "Learn More" — vague, gives no indication of what "more" entails
- "Contact Us" — accurate but provides no benefit reason to act
- "Get Started" — overused to the point of invisibility
Research by Unbounce found that first-person language ("Get My Free Trial" vs "Get Your Free Trial") improves click rates by 7–9% on average. The psychological principle: the visitor is already thinking "I want this" — writing the CTA from their perspective reduces the mental translation step.
What Is the Best Colour for a CTA Button?
The best CTA button colour is the one that creates the most contrast with the page it appears on. This is the most reliable principle, overriding any colour psychology theory.
Practical guidelines:
- The CTA button colour should not appear elsewhere on the page as a background or design element
- Orange and red CTAs consistently perform well in testing across many industries — primarily because most brand palettes do not use these colours heavily, making them stand out
- Green CTAs perform well on pages with dark or neutral backgrounds
- Blue CTAs tend to perform less well on pages where blue is the brand colour — they blend in rather than contrast
The contrast test: Look at your CTA button against its background. If your eye is not immediately drawn to the button, the contrast is insufficient. A button that blends into the page cannot perform.
A/B test results for button colour are highly context-dependent — what wins on one site often loses on another because of the surrounding design. Contrast and visibility are more reliable principles than specific colour recommendations.
What Is the Right CTA Button Size?
Minimum for mobile: 44×44px (the Apple Human Interface Guidelines and WCAG 2.1 accessibility minimum tap target size)
Recommended for primary CTAs: 48–56px height, with sufficient horizontal padding (20–32px each side) so the button has visual weight appropriate to its importance
Maximum: There is no maximum, but proportionality matters. A button wider than the text label by more than 30% starts to look awkward. A button that takes up the full page width on desktop looks like a banner ad.
Key principle: The primary CTA should be visually larger than secondary CTAs. If "Book a Discovery Call" and "Learn More" are the same size, they compete equally. Size hierarchy communicates priority.
Where Should CTA Buttons Be Placed?
Above the fold (mandatory): The primary conversion action must be visible without scrolling. This is the single most impactful placement principle. See above the fold design guide for the full context.
After the value proof: A CTA placed immediately after a strong testimonial, a case study summary, or a compelling outcome metric captures the visitor at their peak interest. Research shows CTAs placed after social proof convert at higher rates than CTAs placed before it.
At the bottom of every key page: Visitors who reach the bottom of a page are the most engaged segment. A CTA at the bottom — "Ready to start? Book a discovery call" — captures this segment without asking for action before they are ready.
In the header navigation: A CTA button in the site header ensures the conversion action is visible on every page without scrolling. This is one of the most consistent conversion improvements for business websites. See website navigation design guide for implementation details.
On scroll (sticky): For mobile landing pages and long-form content pages, a sticky CTA bar that appears after scrolling a certain distance (typically 50% of page height) captures mobile visitors who are engaged but have not yet converted.
What Are the Most Common CTA Design Mistakes?
Mistake 1: One CTA on the entire website. If your website's only CTA is a "Contact" link in the navigation, you are relying on every visitor to find and use that one link. Primary CTAs should appear on every page — in the header, after key content blocks, and at the bottom of each page.
Mistake 2: CTA below the fold. An excellent hero section that ends without a visible CTA loses the visitors who are most primed to act — those who have just read the headline and decided they are interested.
Mistake 3: Generic secondary CTAs. "Learn More" placed below a case study or service description describes the action mechanically rather than making the specific value proposition of clicking visible. "See How We Helped [Client Type]" outperforms "Learn More" consistently.
Mistake 4: Insufficient visual weight. A CTA button that is the same visual weight as other design elements on the page does not command attention. It should be the most visually prominent interactive element on the page.
Mistake 5: CTA that does not match the page's conversion stage. A blog article that ends with "Buy Now" asks for a purchase decision from a reader who was in learning mode. "Book a Free Discovery Call" is appropriate for the bottom of a service page; "Download the Full Guide" is appropriate for the bottom of a blog post.
How Does CTA Design Connect to Conversion Rate?
CTA optimisation is consistently among the three highest-ROI CRO activities, alongside headline improvement and social proof placement. Specific documented improvements:
- Changing "Submit" to "Get My Free Quote" → 24% conversion increase (Unbounce case study)
- Adding a CTA button to the site header → 22% increase in contact form submissions
- Making a CTA button 20% larger → 9% increase in clicks (average across multiple tests)
- Changing button colour from grey to orange on a blue brand site → 32% increase in clicks
These are individual test results — your specific improvement will vary. But the pattern is consistent: CTA design changes produce immediate, measurable conversion results faster than almost any other website change.
See website conversion rate optimisation for the full CRO framework that CTA design sits within.
Your CTAs Should Convert More Visitors Into Enquiries
We design conversion-focused websites with CTAs that work — for businesses in the US, UK, Canada, and Australia ready to convert more of their existing traffic.
A high-converting CTA button has four characteristics: specific action copy that describes what happens next (not generic labels like 'Submit' or 'Click Here'), a contrasting colour that stands out from the page design, sufficient size (minimum 44px height, preferably 52px for primary CTAs), and placement above the fold and after key trust-building content. First-person language ('Get My Free Quote') consistently outperforms second-person ('Get Your Free Quote') by 7–9% in A/B tests.
The best CTA button colour is the one that creates the most contrast with the page it appears on. The most universally effective colours are orange and red (for pages with blue or neutral brand palettes), green (for pages with dark backgrounds), and high-contrast black or white buttons on heavily styled pages. The principle: the CTA colour should not appear elsewhere on the page as a background or design element, ensuring it stands out as the most visually distinct interactive element.
Each page should have one primary CTA — one clearly defined next step. That primary CTA can be repeated 2–3 times on longer pages (above the fold, mid-page, and at the bottom), but all repetitions should point to the same action. Secondary CTAs (like 'View Case Study' alongside a primary 'Book a Call') are appropriate when they serve a different audience segment, but they should be visually subordinate to the primary action.
The primary CTA must be above the fold (visible without scrolling) on every key page. Additionally: in the header navigation as a distinct button, immediately after the strongest trust signal or case study on the page, and at the bottom of every service, product, and case study page. For mobile landing pages, a sticky CTA that appears after 50% of page scroll captures engaged visitors who have not yet converted.
'Contact Us' is accurate but provides no benefit reason to act. It describes the mechanical action (initiating contact) without communicating the value of doing so. 'Book Your Free Discovery Call', 'Get My Free Quote', or 'Start a Project' each communicate what the visitor gains from acting, which is a stronger conversion motivator. In A/B tests across professional services websites, specific benefit-led CTA copy consistently outperforms generic labels by 15–35%.