According to HubSpot’s marketing statistics, personalised and clearly designed calls to action convert significantly better than generic buttons, and the difference usually comes down to five things: colour and contrast, wording, placement, size and whitespace, and how the button behaves on a phone screen. Get those five right and a call to action button stops being decoration and starts being the single hardest-working element on the page.
This guide walks through each of those five factors in turn, then covers how to test button changes properly rather than guessing. It’s written for business owners who already have a website but suspect their buttons aren’t pulling their weight, whether that’s a ‘Get a Quote’ button nobody clicks or a checkout button that visitors abandon on mobile. Our web design services build this thinking into every new site from the outset, but the same principles apply whether you’re redesigning an existing button or building a page from scratch.
Colour and Contrast: Why Your CTA Button Needs to Stand Out, Not Just Look Nice
A CTA button’s colour matters far less than its contrast against everything around it. A button only works if a visitor’s eye lands on it within a second or two of the page loading, and that happens through contrast, not through picking a colour that’s supposedly proven to convert.
There’s a persistent myth that green or orange buttons always outperform red ones. In practice, the data doesn’t support a single universal best colour, what matters is that the button colour contrasts sharply with the background and surrounding elements, so it reads as clickable rather than blending into the page furniture. A bright orange button on a white background works. So does a white button on a dark navy background. A pale grey button on a light background does not, no matter how tasteful it looks.
Accessibility matters here too. The W3C Web Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 between text and its background for normal-sized text, and this applies directly to button text against its button colour. A button that fails this ratio isn’t just an accessibility problem, it’s genuinely harder for a meaningful slice of your visitors to read, including anyone using the site in bright sunlight on a phone.
Consistency matters as much as the colour itself. If a button is orange on the homepage and blue on a service page, visitors lose the visual shorthand that tells them ‘this is the thing to click’. Picking one primary CTA colour and using it consistently across every page trains visitors to spot it instantly, wherever they land on the site, while a secondary or lower-priority action, such as ‘Learn More’, can sit in a quieter, less saturated colour so it doesn’t compete with the main action.
Writing CTA Button Copy That Actually Gets Clicked
Generic labels like ‘Submit’ or ‘Click Here’ tell a visitor nothing about what happens next, and vague copy is one of the quickest ways to lose a click a visitor was otherwise ready to make. Effective button copy is specific, action-led, and usually written from the visitor’s point of view rather than the business’s.
Start with a strong verb: ‘Get’, ‘Book’, ‘Start’, ‘Download’, ‘Reserve’ all outperform passive phrasing because they describe an action rather than a form field. Pairing the verb with the specific outcome works even better, ‘Get My Free Quote’ tells a visitor exactly what they’ll receive, where ‘Submit’ tells them nothing. For an ecommerce site, this same logic applies to product pages, ‘Add to Basket’ or ‘Buy Now’ consistently outperforms a plain ‘Purchase’ button, which is one of the reasons our Shopify website design builds treat button copy as part of the product page layout, not an afterthought bolted on at the end.
Keep the copy short, two to five words is the usual sweet spot, and match the tone to what a visitor expects at that point in their journey. A first-time visitor responds better to low-commitment language (‘Learn More’, ‘See How It Works’) than a hard sell, while a visitor already on a pricing or contact page can handle a more direct ask (‘Get Started Today’).
Where to Place Your CTA Button: Above the Fold and Beyond
Placement decides whether a well-designed button ever gets seen in the first place. Nielsen Norman Group research on user behaviour has repeatedly found that visitors decide within seconds whether a page is worth their attention, so a primary CTA that only appears after several scrolls of text is competing against a visitor who may already have left. At least one CTA should sit above the fold, visible without scrolling, ideally near the headline and a one-line explanation of what the business does.
That doesn’t mean cramming every button into the hero section. Repeating the CTA at natural decision points further down the page, after a services summary, after testimonials, at the end of a long article, gives visitors who need more convincing a chance to act once they’re ready, rather than forcing them to scroll back up. This is closely tied to why so many sites lose visitors before they ever reach a CTA at all, our practical guide to fixing high bounce rates covers the layout and loading issues that stop people getting far enough down the page to see a button at all.
Never force a visitor to backtrack to find a button they’ve already scrolled past. If a page is long, a sticky or repeated CTA is usually worth the slight visual cost, a button visitors can’t find is a button that never converts.
Button Size, Whitespace and Visual Hierarchy
A CTA button needs enough visual weight to look like the obvious next step on the page, and that comes from size and the space around it rather than from decoration. A button crammed between other text and images, with no breathing room, reads as just another line item, however bright its colour.
As a working guide, a primary CTA button should be large enough to be the first or second thing a visitor’s eye catches on the page, generally with generous internal padding, think comfortably more than a standard text link, and clear whitespace separating it from surrounding content. If a page has more than one button, the primary action should be visually dominant, larger, brighter, or more central, while secondary actions (‘Learn More’, ‘View Pricing’) sit smaller and less prominent nearby. A page with five buttons competing for equal attention gives visitors a decision to make about which button to click, when the entire point of a CTA is to remove that decision.
Mobile Tap Targets: Designing CTAs for Touchscreens
A button that looks perfectly sized on a desktop monitor can be genuinely difficult to tap accurately on a phone, and this matters more than most businesses realise given how much traffic now arrives on mobile. Google’s mobile-first indexing guidance treats the mobile version of a site as the primary version for ranking purposes, which means a CTA that’s fiddly to tap on a phone is a mobile usability problem, not just a design nicety.
Apple’s and Google’s own platform guidelines both recommend a minimum tappable area of roughly 44 by 44 points (Apple) or 48 by 48 density-independent pixels (Google) for any touch target, with comfortable spacing between adjacent tappable elements so a visitor with an average-sized thumb doesn’t accidentally hit the wrong one. In practice, that means a mobile CTA button needs generous padding, not a shrunk-down version of the desktop button, and enough margin around it that it doesn’t sit flush against another link or button.
Thumb reach is worth thinking about too. Most people hold a phone one-handed and operate it with a thumb, which naturally reaches the lower half of the screen far more comfortably than the top corners. A primary CTA fixed near the bottom of the viewport, or repeated there as a sticky bar, is often easier to tap than one only available at the very top of a long page, particularly on the larger phone screens now common in the UK market.
Slow-loading pages compound this problem, since a visitor who has to wait for a page to finish rendering before a button becomes tappable is a visitor who may already be scrolling away. Our guide on website page speed optimisation covers the technical side of this in more depth, but the short version is that a beautifully designed button is worthless if the page hasn’t finished loading by the time a visitor tries to tap it.
A/B Testing Your CTA Buttons: The Basics
Every recommendation above is a strong starting point, not a guarantee, and the only way to know what actually works for a specific audience is to test it. A/B testing means showing two versions of a button, identical except for one changed variable, to similar segments of visitors, then measuring which version gets more clicks or conversions.
Test one variable at a time, colour, wording, size, or placement, not all four at once, otherwise there’s no way to know which change actually moved the needle. Run the test long enough to gather a meaningful sample before drawing conclusions, a handful of clicks either way over a single afternoon proves nothing, and running several tests back to back rather than all at once avoids one change muddying the results of another. Free tools built into Google Analytics and most website builders can track click-through rates on individual buttons well enough to run a basic test without needing dedicated software. Every site we build includes full GA4 analytics setup as standard specifically so this kind of button-level testing is possible from day one, rather than something bolted on later, and our SEO services build on that same data to work out which pages and buttons need attention first.
Common CTA Mistakes That Quietly Cost Businesses Conversions
A handful of mistakes show up repeatedly across underperforming websites. Having more than one button competing for the same primary action confuses visitors about what to do next. Vague copy like ‘Submit’ or ‘Click Here’ gives no reason to click. Low-contrast buttons that blend into the page design go unnoticed entirely. Buttons buried below several scrolls of text never get seen by visitors who leave before reaching them. And CTAs that are never tested or revisited quietly underperform for months or years because nobody’s watching the numbers.
Ignoring mobile visitors entirely is perhaps the costliest mistake of all, since a business that designs its CTA around how it looks on a desktop monitor, then never checks how it behaves on a real phone, is often optimising for a minority of its actual traffic. Checking button behaviour on an actual handset, not just a resized browser window, catches problems a desktop-only review never reveals.
These mistakes tend to compound, a business with a poorly designed website loses far more than a few missed clicks over time, our breakdown of the real cost of a poorly designed website to UK businesses puts a figure on what that adds up to across a year of lost enquiries.
Getting CTA buttons right is rarely about a single clever trick, it’s the accumulation of contrast, wording, placement, size, mobile usability, and ongoing testing all pulling in the same direction. That’s the same thinking behind every site we design at Xeon Creative, whether it’s a single landing page or a full ecommerce build, and it’s why our web design services treat the CTA as one of the most important elements on the page rather than something added at the end.