A call to action (CTA) is the moment a page asks for something. The headline, the proof and the pricing all exist to make that ask feel reasonable. Get the button wrong and that work leaks away: a ready visitor hesitates at a vague label, misses a button that blends in, or can’t find one on the phone in their hand. Most CTA best practices come down to preventing those three failures.
None of it depends on a magic colour. A good call to action is a clear promise, placed where the visitor is ready to accept it.
CTA best practices at a glance
- Wording: a specific verb plus the outcome, matched to the visitor’s readiness. “See pricing” for someone comparing, “Get a quote” for someone deciding.
- Design: stand out through contrast and visual weight, meet WCAG 2.2’s target size, and use links to go somewhere and buttons to do something.
- Placement: on the first screen, then again where decisions happen: after proof, after pricing and at the end.
- Hierarchy: one primary action per view, with a quieter, lower-commitment alternative.
- Honesty: no “Submit”, no guilt-trip decline links, no fake urgency.
Wording: what your CTA button text should say
In two to five words, button text has to tell visitors what they’ll get and hint at the effort involved.
Use a specific verb plus an outcome
Generic verbs describe the mechanics; specific verbs describe the result the visitor wants.
| Instead of | Try | Why it works |
|---|---|---|
| Submit | Send my enquiry | Says what happens to what they typed |
| Learn more | See how the process works | Says what the next page holds |
| Contact us | Get a quote | Names the outcome, not the effort |
| Download | Download the price guide (PDF) | Sets expectations about format |
Check it yourself. Read each label out of context. If you can’t tell what happens when you click, it’s too vague. Screen reader users often meet links this way, as a list pulled from the page, which is one reason WCAG asks that a link’s purpose be clear from its text or surrounding context.
Match the ask to the visitor’s stage
A frequent wording mistake is asking for too much, too early. A first-time reader isn’t ready to book a consultation, and someone who has studied your pricing and three case studies deserves more than “Learn more”.
| Visitor stage | What they’re asking | CTA examples | Commitment |
|---|---|---|---|
| Exploring the problem | “Is this worth solving?” | Read the guide, See examples | Low |
| Comparing options | “Who fits, and what does it cost?” | See pricing, View our work | Medium |
| Ready to decide | “How do I start?” | Get a quote, Book a call | High |
“See pricing” and “Get a quote” both lead to money, but the first answers a question for free while the second asks for details and patience. Offering both on a service page lets each visitor choose. Mapping those questions to pages is the heart of designing around the customer journey.
Say what happens after the click
One line under the button can remove the doubt that stops the click: “We reply within one business day”, “No obligation”, “Takes about two minutes”. Write them only if they’re true.
The destination must keep the label’s promise too. A “See pricing” button that lands on “contact us for pricing” breaks it. There’s more on this microcopy in how to write landing page copy.
CTA button design: how a call to action should look
Contrast and visual weight, not a magic colour
Claims about the best-converting button colour miss the mechanism. A button draws the eye because it differs from its surroundings: the isolation, or von Restorff, effect. An orange button on an orange-heavy page disappears; on a calm, neutral page it stands out.
- Reserve one accent colour for actions, not decoration.
- Leave space around the button. Crowded buttons lose weight.
- Run the squint test from our guide to visual hierarchy in web design: blur your eyes, and the primary action should still be the first control you notice.
Contrast also has a floor. At Level AA, WCAG 2.2 asks for 4.5:1 between button text and its background (3:1 for large text), and 3:1 for the visual cues people need to identify a control or its state, such as a focus ring. Pale “ghost” buttons often fail here, and are weak for the main action anyway. Our WCAG 2.2 guide covers the detail.
Make it big enough to hit
WCAG 2.2’s Level AA Target Size (Minimum) rule asks for pointer targets of at least 24 by 24 CSS pixels, or enough spacing around smaller ones. Treat that as a floor: the AAA criterion asks for 44 by 44, Apple’s Human Interface Guidelines recommend 44 by 44 points, and Google’s Material Design recommends 48 by 48 density-independent pixels. A primary button 44 to 48 pixels high, clickable across its whole area, is a sensible default.
Let buttons grow with their labels: translations often run longer, and fixed widths truncate them.
Use a link or a button, deliberately
- A link (
<a href>) goes somewhere, such as a “Get a quote” that opens the contact page. It can be styled as a button. - A button (
<button>) does something on the page: submits a form, opens a menu.
Why it matters. Keyboard users activate links with Enter and buttons with Enter or Space, and screen readers announce the two differently. A div with a click handler is neither, and can’t be reached by keyboard without extra code. Keep the visible label and the coded name in step too (WCAG’s Label in Name rule): if a button reads “Get a quote” but its accessible name is “Submit form”, voice-control users who say what they see can’t activate it.
Design every state
A button is several designs: default, hover, keyboard focus, pressed, loading and done. Keep a visible focus ring. After a submit, show progress and block a second press, or you’ll get duplicate enquiries. Don’t grey out a submit button until every field is valid; let people press it and show clear errors, as covered in web form design.
CTA placement: where calls to action belong
Where decisions happen, not only above the fold
“Put the CTA above the fold” is half right. The first screen on a phone should show the main action for visitors who arrive ready. Most people weighing a considered purchase aren’t ready yet. Nielsen Norman Group’s eye-tracking research on scrolling found that people do scroll, though most of their attention stays near the top. So the action belongs at the top and again wherever visitors become convinced. On a typical service page:
- The hero.
- After pricing or package details.
- After proof: a case study, reviews, results.
- After the FAQ, once objections are answered.
- The end of the page.
Each repeat should follow content that answers a question; a button after every paragraph reads as pressure. Our landing page structure guide shows where these points fall.
Articles need a softer ask. Readers are early in their research, so offer a related guide, the relevant service page or a free site review rather than “Get a quote”.
Sticky CTAs on mobile
On a long page on a phone, the header button scrolls away. A slim sticky bar at the bottom, with one or two actions such as “Get a quote” and a call button, keeps the next step within thumb reach. Keep it disciplined:
WCAG 2.2’s Focus Not Obscured (Minimum) rule (Level AA) also applies: a keyboard-focused element must not be entirely hidden by content you added, such as the bar itself. Setting CSS scroll-padding-bottom to the bar’s height is one fix W3C documents.
Primary and secondary CTAs
Each view needs one primary action: the most valuable step the visitor is realistically ready for. The secondary is a lower-commitment alternative: “Get a quote” with “See pricing”, “Request a site visit” with “Download the floor plans”.
- Style them differently. A solid fill for the primary, an outline or text link for the secondary. Never two equally loud buttons side by side.
- Put the primary first in reading order. In right-to-left language versions, button order mirrors with the layout.
- Make the secondary a step forward, not an exit. “Follow us on social media” sends interested visitors away.
- Stop at two. More options in a hero start to compete.
Which contact channels to offer
A CTA is only as good as the channel behind it. Offer the two or three your customers prefer and your team can answer quickly.
| Channel | Best for | Watch out for |
|---|---|---|
| Enquiry form | Detailed requests, quotes, out-of-hours enquiries | Too many fields; submissions that reach nobody |
| Phone (tap to call) | Urgent or high-value needs, people who prefer to talk | Unanswered calls; show hours and time zone |
| Messaging apps | Quick questions on mobile | Needs fast replies; harder to track |
| Booking link | Consultations, demos, site visits | Long waits for the first free slot |
Write phone numbers in international format, with the country code, so they work for customers abroad. Then record every channel as a key event, as our guide to tracking enquiries in GA4 explains, so you know which CTAs start conversations. When we rebuilt a property developer’s website, every project page got an enquiry form and a messaging link, both tracked. For routing and follow-up, see website lead generation.
CTA mistakes to avoid
- Vague labels. “Submit”, “Click here” or five identical “Learn more” links.
- Guilt-trip decline links. “No thanks, I don’t want more customers”, known as confirmshaming, insults the visitor. “No thanks” is enough.
- Fake urgency. Resetting countdown timers and invented scarcity add doubt, and misleading claims can breach consumer protection rules.
- Things that don’t look clickable, and decoration that does. Flat text CTAs get missed; tags styled as buttons get tapped and do nothing.
- Pop-ups on arrival. A sign-up box covering the page before anyone has read a word. Google’s Search Central guidance advises against intrusive interstitials and suggests a small banner instead.
A CTA audit you can run yourself
- Pick your five most visited landing pages in Google Analytics, plus the contact page.
- On your phone, list every call to action in a spreadsheet: label, style, position and destination.
- Score each against the table below.
- Note the busiest page’s current enquiry rate, fix that page first, then compare, as our conversion rate optimisation guide describes.
| Check | Passes when | How to test |
|---|---|---|
| Label | Specific verb and outcome, clear out of context | Read the labels as a list |
| Stage fit | The ask matches what the page has explained so far | Would you click, having read only that far? |
| Promise kept | The destination delivers what the label said | Click every CTA |
| Visual weight | One primary per view, noticed first | Squint test |
| Contrast | 4.5:1 for text, 3:1 for focus rings and control cues | A contrast checker |
| Target size | At least 24 by 24 CSS pixels; 44 to 48 for primary buttons | Browser developer tools |
| Semantics | Links go somewhere, buttons do something | Tab through using Enter and Space |
| Placement | In the hero and after pricing, proof and the FAQ | Scroll and mark the decision points |
| Tracking | Every form, call and message click is recorded | Click it, then check the Realtime report |
What to do next
Start with the audit on your busiest page. Vague labels, weak contrast or a missing CTA after the proof are often quick fixes, and each removes a reason for a ready visitor to hesitate.
If the problems run deeper, with a page trying to do five jobs or a message that doesn’t land, the page itself needs rethinking rather than a new button. Our landing pages are built around one goal and one clear call to action, with the form built in.
Want a second pair of eyes first? Our free website audit checks how easily visitors can get in touch, which makes it a quick way to find the buttons, forms and contact links getting in the way.