Quick answer: A good call to action button tells the visitor exactly what happens next, stands out clearly from the rest of the page, sits where the visitor is ready to act and is easy to tap on a phone. Write labels that describe the outcome (“Get my quote”, “Book a 20-minute call”) rather than generic verbs like “Submit”. Use one primary button per section, support it with a short line that removes doubt, and test changes against a clear goal instead of guessing.
What a call to action button has to do
A button is a small element with a big job. It has to:
- Be noticed
- Be understood
- Feel safe to click
- Lead somewhere that matches what it promised
Most weak buttons fail on the second or third point. They are visible, but the label is vague or the visitor is not sure what they are committing to. Design gets attention; copy and context get the click.
Writing the label
Describe the outcome, not the action
“Submit”, “Click here” and “Learn more” describe what the visitor does with their mouse. Better labels describe what they get:
- “Submit” becomes “Send my enquiry”
- “Sign up” becomes “Start my free trial”
- “Download” becomes “Get the pricing guide”
- “Contact us” becomes “Book a 20-minute call”
The visitor should be able to read the button alone and know what will happen.
Keep it short
Two to five words is a sensible range. If you need more, the extra detail usually belongs in a line of supporting text next to the button.
Match the visitor’s stage
Someone reading their first blog post about a topic is not ready to “Buy now”. Someone on a pricing page might be. Offer a step that fits:
- Early research: “Read the guide”, “See examples”
- Comparing options: “Compare plans”, “See pricing”
- Ready to decide: “Get my quote”, “Book a call”, “Add to cart”
First person can help
Labels like “Get my quote” sometimes perform better than “Get your quote” because the visitor reads them as their own decision. It is not a rule, but it is a cheap test.
For more on writing the words around buttons, see our guide to conversion copywriting.
Designing the button
Contrast first
The primary button should be the most visually distinct interactive element in its section. That does not require bright red or orange. It requires contrast with the background and with nearby elements. A button that matches the brand colour of every heading and link disappears.
Check text contrast inside the button too. Light grey text on a pale button may look stylish but is hard to read, especially on phones outdoors.
Make it look like a button
Visitors recognise buttons by shape: a filled or outlined rectangle, often with slightly rounded corners, with centred text. Ghost buttons (outline only) and text links can work for secondary actions, but the primary action should look clickable without the visitor having to hover.
Size and spacing
On mobile, the button should be large enough to tap comfortably and have clear space around it. Full-width buttons on small screens are often the simplest choice. On desktop, the button should be large enough to notice but not so large it looks like a banner.
States
Design hover, focus and pressed states. Focus states matter for keyboard users and are often removed by mistake. A visible loading state after click prevents double submissions and reassures the visitor that something is happening.
Placing the button
Where the decision happens
Put buttons where the visitor has enough information to act. That is often:
- Near the top of the page for visitors who already know what they want
- After the key benefits or proof
- At the end of the page, for visitors who read everything
The idea that every important button must sit above the fold is too simple. A button near the top helps returning or ready visitors. Others need the content first. Most pages benefit from both.
One primary action per section
When several buttons compete with equal weight, visitors hesitate. Choose one primary action for each section. If you need a secondary option, make it visually lighter, such as an outline button or a text link.
Guide the eye
Layout, white space and imagery can lead attention toward the button. Our post on directional cues covers techniques like eye lines in photos, arrows and spacing.
Supporting copy that removes doubt
A short line next to or below the button can answer the visitor’s last hesitation:
- “No card required”
- “We reply within one working day”
- “Takes about two minutes”
- “Free, with no obligation”
Only promise what is true. A reassurance that turns out to be false costs more trust than it earns clicks.
Where the button leads
The click is only half the job. The next page must deliver what the button promised:
- “Get the pricing guide” should lead to the guide or a short form for it, not a general contact page
- “Book a call” should show available times, not a generic form asking for a description of the project
- “Start free trial” should not ask for a credit card if the supporting text said it would not
Mismatches between the label and the destination are one of the fastest ways to lose a visitor who was ready to act. If a form follows the click, keep it short. Our guide to lead form placement covers where and how to present it.
Testing buttons properly
Button tests are popular because they are easy to set up. They are also easy to misread. A few rules help:
- Test one change at a time where possible: label, colour, placement or supporting line
- Measure the real goal, such as completed enquiries, not just button clicks
- Run the test long enough to cover normal weekly patterns and reach enough conversions to trust the result
- Segment by device, because a change that helps desktop may not help mobile
Our A/B testing guide covers setup and how to avoid calling a winner too early.
On low-traffic sites, formal tests may take too long. In that case, use heatmaps, session recordings and user feedback to spot problems, make sensible changes and watch the trend.
Accessibility checks
- Use a real button or link element, not a styled div
- Make sure the label makes sense out of context for screen reader users
- Keep a visible focus state
- Do not rely on colour alone to show a button is active or disabled
- Make icon-only buttons readable with accessible labels
These checks help everyone. A button that works with a keyboard and a screen reader is usually clearer for all visitors.
Common mistakes
- Generic labels like “Submit” or “Click here”
- Too many buttons of equal weight on one screen
- Primary buttons styled the same as secondary links
- Removing focus outlines for looks
- Buttons that lead to a page that does not match the promise
- Testing colour endlessly while ignoring the offer itself
FAQ
What colour should a call to action button be?
There is no single best colour. Pick one that contrasts clearly with the page and is not used for other elements, then keep it consistent across the site so visitors learn what it means.
How many call to action buttons should a page have?
As many as the page length needs, usually one per major section, but only one primary action at a time. Long pages often repeat the same primary button several times.
Should buttons use arrows or icons?
They can help signal direction or progress, but the label should work without them. Test if you are unsure.
Small element, big effect
Clear labels, strong contrast, sensible placement and an honest promise do most of the work. If you want help reviewing the buttons and paths on your key pages, see our Turn visitors into customers service.
