Website Call to Action: Examples, Button Design and Placement That Get Clicks in 2026

Most business websites already have a call to action. The trouble is usually not that the button is missing. It is that the page asks for too many things at once, the button says something vague like “Submit” or “Learn more”, it sits where nobody is ready to click, or the step after the click is a long form that quietly loses people.

What is a call to action on a website?

A call to action, usually shortened to CTA, is an element that asks a visitor to do something specific. On most business sites it is a button: “Book a free consultation”, “Get a quote”, “Call now”, “Start your order”. It can also be a text link inside a paragraph, a phone number set up for click-to-call, a WhatsApp link, or a short form embedded on the page.

It helps to separate the CTA into three parts, because each one fails in its own way:

• The offer. What the visitor gets by clicking: a call, a quote, an estimate, a download, a booking. If the offer is weak or unclear, no button design will save it.
• The element. The button or link itself: its words, size, color, position and how it behaves on a phone.
• The destination. What loads after the click: a form, a calendar, a checkout, a phone dialer.

When a page “has a CTA but gets no leads”, the cause is often in the first or third part, not the button. Our guide to a website that is not getting leads walks through the full diagnosis, from traffic to tracking.

Primary, secondary and micro CTAs: one main job per page

Primary CTA. The one action the page exists to produce. On a service page, it is usually “Book a consultation” or “Request a quote”. It gets the strongest visual treatment, and it appears more than once on long pages. There should be one primary CTA per page. When two different actions compete for the top spot, visitors hesitate between them, and hesitation tends to end in no action at all.

Secondary CTA. An alternative for people who are interested but not ready for the main step. “See our work”, “Download the checklist” or “Call us instead” are typical. It is visually quieter, often an outline button or a text link next to the primary one.

Micro CTAs. Small prompts inside the content: a link in a paragraph that sends readers to a related service, a “compare plans” link under a pricing table, a “read the case study” link next to a result. They help people move through the site toward the point where the primary CTA makes sense.

A page should have one primary call to action. Secondary links can offer a softer step, but when two main actions compete for attention, visitors hesitate, and hesitation on a website usually ends with the visitor leaving.

Which call to action does each page need?

The right CTA depends on what the visitor came to that page to do. Someone reading a blog post is gathering information. Someone on a pricing or contact page is close to a decision. Asking both for the same commitment ignores where they are. The table below maps common pages to the visitor’s intent and a fitting primary and secondary action.

How to write website call to action text

The words on a CTA button carry most of the weight. Many sites still ship with defaults like “Submit”, “Click here” or “Learn more”, which describe the mechanics of clicking rather than what the visitor gets. A stronger pattern is verb + outcome: say what the person does and what they receive.

The “20-minute” in that example only works if it is true. If you cannot keep a specific promise every time, leave the detail out.

A few writing rules hold up across most sites:

1. Start with a verb. Book, get, see, start, call, request, schedule, compare. The verb tells the visitor what happens.
2. Name the outcome. “Get my estimate” is clearer than “Get started” because it names what the visitor receives.
3. Match the visitor’s language. If your customers say “quote”, do not write “proposal”. If they search for “inspection”, do not call it an “assessment”.
4. Keep it short. Two to five words usually fit on a button on a phone without wrapping awkwardly.
5. Use supporting microcopy. One line under the button can answer the last doubt: “No obligation”, “Takes about two minutes”, “We reply by email”. Only write what is true.

Website call to action examples by business type

The best website call to action examples are specific to what the business sells and how its customers buy. A plumber’s visitor often has an urgent problem and wants a phone number. A software buyer wants to see the product before talking to sales. The table below shows typical primary and secondary actions for common types of business. Use them as starting points and adjust the words to your offer.

Real estate deserves a note because the same site serves two very different visitors. A buyer browsing listings wants to search and save homes. A homeowner thinking about selling wants to know what the house is worth. A single “Contact me” button serves neither well. Separate paths with their own CTAs work better, a pattern we use on real estate websites for agents and loan officers, and the listing search side depends on a solid IDX website setup.

CTA button design: size, contrast, shape and states

A call to action button has one visual job: be obviously clickable and obviously the most important action on the screen. Good CTA button design comes down to a handful of decisions.

Contrast, not a magic color. There is no single color that converts best. What matters is that the primary button contrasts with everything around it and that the same color is reserved for primary actions across the site. If every link and badge is the same bright color as the main button, nothing stands out. For readability, the W3C’s WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (Success Criterion 1.4.3), and at least 3:1 for the visual boundaries of interface components (1.4.11). Button text on a button background falls under those rules.

Size and spacing. WCAG 2.2 added Success Criterion 2.5.8, Target Size (Minimum), a Level AA requirement: pointer targets should be at least 24 by 24 CSS pixels, with exceptions such as enough spacing around smaller targets or links inside a sentence. The stricter Level AAA criterion, 2.5.5, uses 44 by 44 CSS pixels. For a primary CTA there is rarely a reason to go near the minimum. Make it comfortably large for a thumb.

States. A button should look different when hovered, focused with a keyboard, pressed and disabled. The focus state is required for keyboard users (WCAG 2.4.7, Focus Visible), and many custom designs remove it by accident. A loading state after the click, such as a spinner or “Sending…”, stops people from clicking twice and wondering whether anything happened.

Where to put the call to action on a page

The old rule said “put the CTA above the fold”, meaning in the part of the page visible before scrolling. It is half right. A primary call to action near the top helps visitors who already know what they want. But many visitors need to read, see proof and understand the offer before they are ready, and for them the right moment comes further down.

A practical placement pattern for a long service page looks like this:

1. In the first screen. A primary CTA next to the headline, for visitors who arrive ready to act.
2. After the explanation of the offer. Once the page has said what you do and for whom, offer the action again.
3. Next to proof. After a case study, review or result, the visitor’s confidence is at a high point. A CTA there catches that moment.
4. After objections. Following an FAQ or a section that answers doubts about cost, process or timing.
5. At the end. A closing CTA for people who read everything. Ending a long page with no next step wastes the reader’s attention.

Repetition is fine as long as it is the same action. Three buttons that all say “Book a consultation” reinforce one path. Three different asks in three places scatter it.

On long articles, spacing matters too. This guide, like the other GoSocial guides, places a call to action roughly every four sections and never more often. The rule exists because readers who arrive from search are at different stages, and a reader who reaches section eight is a different person, in terms of interest, than one who skimmed the first screen. Spacing the asks gives each of them a natural next step without turning the article into an advertisement.

Homepage call to action: what the first screen should ask for

The homepage call to action is the hardest one to get right, because the homepage serves the widest mix of visitors. Some already know the business and want to book. Some arrived from a referral and want to check you out. Some are comparing three companies in three tabs.

A homepage first screen usually works best with three elements: a headline that says what you do and for whom, one line that says why someone should choose you, and one primary CTA, optionally with a quieter secondary link. “Book a consultation” with a secondary “See our work” covers both the ready visitor and the one who wants proof first.

Common homepage mistakes include:

• A headline about the company instead of the customer. “Welcome to our website” uses the most valuable space on the site to say nothing.
• Too many equal buttons. Four buttons of the same size and color make every option look equally important, which means none of them is.

Further down, the homepage can repeat the primary CTA after each major block: services, proof, process and final section. The homepage of a business with several services can also route visitors to the right service page, where a more specific CTA takes over. Our custom web development process plans the homepage around this routing job before any design work starts.

Calls to action on mobile: thumbs, sticky bars and click-to-call

On many business sites, most visits come from phones. A CTA that works on a wide desktop layout can fall apart on a narrow screen: the button wraps onto two lines, sits below three screens of text or lands right next to another link where a thumb hits the wrong one.

A few mobile rules hold up across most sites:

• Make the button wide. A full-width or nearly full-width primary button is easy to hit with a thumb and hard to miss.
• Use click-to-call properly. A phone number should be a real tel: link so tapping it opens the dialer. For businesses where customers call more than they write, the phone link can be the primary mobile CTA.
• Consider a sticky action bar. A slim bar fixed to the bottom of the screen with one or two actions, such as “Call” and “Get a quote”, keeps the CTA available while the visitor reads. Keep it small, so it does not cover content, and make sure it does not hide the cookie notice or other required elements.
• Shorten the path. On a phone, every extra field and every extra page costs more than on a desktop. A booking calendar or a two-field form often fits mobile better than a long form.

What happens after the click: forms, booking pages and the thank-you page

A call to action is a promise, and the page after the click either keeps it or breaks it. This is the part of the CTA that most redesigns forget, because it is not visible in the homepage mockup.

Forms. Ask only for what you need to follow up. Every field should have a reason: if nobody uses the “company size” field, remove it. Label each field clearly, keep labels visible instead of only using placeholder text that disappears when typing starts, and show errors next to the field in plain language. Test the form yourself from a phone, and send a test submission after every change to the site.

The thank-you page. After a form is sent, show a confirmation page that says what happens next: who will respond, by which channel and roughly when, if you can commit to it. A thank-you page is also the cleanest place to confirm a conversion in analytics, because only people who completed the action reach it.

Delivery. The final link in the chain is the inbox. Forms that send to an old address, land in spam or depend on a plugin that broke in an update are a common reason a site “stops getting leads” without anyone noticing. Check that the notification email arrives, and keep a copy of submissions somewhere other than the inbox.

For campaign traffic, the click and the destination need to match even more tightly. A dedicated page built for one offer, as covered in our guide to landing page development, keeps the ad, the headline and the button saying the same thing.

Proof near the button: answering doubt at the moment of decision

The moment before a click is the moment of most doubt. Will they call me back? Is this going to be expensive? Have they done this before? Proof placed near the CTA answers those questions at the right time.

Useful proof elements near a call to action include:

• A short review or testimonial from a real customer, with a name or business if they agreed to share it.
• A result from a case study, described accurately and without exaggeration.
• Process clarity: one line on what happens after the click, such as “We review your request and reply by email.”
• Risk reducers that are true: no obligation, free estimate, cancel anytime. Never invent a guarantee.

Proof also connects to how search engines and AI assistants judge a business. Clear authorship, real contact details and evidence of experience are part of what Google describes as E-E-A-T, which we explain in our guide to what E-E-A-T means for a business website. The same signals that reassure a person next to the button reassure a system evaluating the page.

Pop-ups, banners and intrusive interstitials

Pop-ups are the most aggressive form of call to action, and also the most likely to annoy. A modal that covers the page seconds after arrival asks for a commitment before the visitor has seen anything worth committing to.

Google’s Search documentation on avoiding intrusive interstitials and dialogs (last updated December 10, 2025) discourages full-page overlays and dialogs that block content, such as promotional pop-ups that cover the page, and recommends banners that use a small fraction of the screen instead. Interstitials that a site is legally required to show, such as age verification, are treated differently.

That gives a practical rule for business sites:

• Prefer inline CTAs and small banners over full-screen pop-ups, especially on mobile.
• If you use a pop-up, delay it until the visitor has shown interest, for example after scrolling through most of an article, and make it easy to close.
• Never block the content people came to read with a promotion they did not ask for.

Honest calls to action: avoiding dark patterns

Some CTA techniques work by pressure or confusion rather than by value. The industry calls them dark patterns: fake countdown timers, “only 2 left” messages that are not true, pre-checked boxes that sign people up for extras, a decline link written to shame the visitor, or a cancel path that is far harder than the signup.

In September 2022, the Federal Trade Commission published a staff report, Bringing Dark Patterns to Light, describing these practices and signaling that the agency treats them as an enforcement priority. The report groups them around designs that create false beliefs, hide or delay important information, obscure privacy choices and push people into actions they did not intend. Not every pattern it describes is illegal in every case, but the direction is clear.

For a business website, the honest version of a CTA is also the more durable one:

• Urgency only when it is real: a genuine deadline, a real limit on availability, a seasonal schedule.
• Costs visible before the click, not revealed at the last step.
• Opt-ins unchecked by default, with plain wording about what the visitor is agreeing to.
• Free means free. If a trial turns into a paid plan, say so next to the button.

This is general guidance, not legal advice; regulated businesses should check the rules for their industry.

Accessible calls to action: buttons, links and labels

An accessible CTA works for people using screen readers, keyboards, voice control or magnification, and it usually works better for everyone else too. Most accessibility problems with CTAs are small and easy to fix.

Descriptive link text. WCAG Success Criterion 2.4.4, Link Purpose (In Context), a Level A requirement, asks that the purpose of each link be clear from its text or its context. A page with ten “Learn more” links is hard to use for someone who lists the links on a page with a screen reader. “See our roofing services” is clear on its own.

The right element. A link takes the visitor somewhere; a button does something on the page, like submitting a form or opening a menu. Using real <a> and <button> elements, instead of styled <div> tags with click handlers, gives keyboard and screen reader support for free.

Visible label matches the accessible name. WCAG 2.5.3, Label in Name, asks that the name a screen reader announces include the visible text. If the button says “Get a quote”, a voice control user should be able to say “click Get a quote” and have it work.

Accessibility is also a legal topic for many U.S. businesses. The Department of Justice has published guidance on web accessibility under the ADA, and our guide on how to create an accessible website covers the broader picture beyond calls to action.

Do calls to action affect SEO and AI search?

A call to action is not a ranking factor in itself. Search engines rank pages for how well they answer a query, not for the color of their buttons. But CTAs can help or hurt search performance indirectly.

They can hurt when they get in the way of the content: intrusive pop-ups on mobile, a hero section that is all buttons and no information, or text that reads like an advertisement instead of an answer. Google’s guidance on helpful content asks whether a page exists mainly to help people or mainly to attract search traffic and sell. A page that leads with value and offers a next step passes that test more easily than one that leads with the ask.

AI search adds a twist. When ChatGPT, Perplexity or Google’s AI features cite a page, the visitor who clicks through often arrives with a narrower, more specific question than a classic search visitor. A page with a clear statement of who the business is, what it does and what to do next serves that visitor well. Our guides on AEO, SEO and GEO and on how to appear in AI Overviews cover the visibility side; the CTA is what happens once that visibility produces a visit.

Nobody can promise that a page will be cited by an AI assistant, and we do not. What a business controls is whether the page is clear, useful and easy to act on when a visitor arrives, from any source. Our SEO, AEO and GEO services work on both halves: being found and being chosen.

How to measure call to action performance in GA4

A CTA you cannot measure is a CTA you cannot improve. The goal is to know, for each important action, how many people took it, from which pages and from which sources.

In Google Analytics 4, the actions that matter to the business are tracked as events and then marked as key events. Google’s help page “Mark events as key events” explains the process: in Admin, under Data display, open Events and mark the event with the star icon, or create a new event with the “Mark as key event” option turned on. GA4 also lists a recommended event called generate_lead for lead submissions.

The events worth tracking on a typical service business site are:

If many people click the main button but few submit the form, the problem is the form or the destination. If few people click at all, the problem is the offer, the wording, the placement or the traffic.

GoSocial sets this tracking up from launch: GA4 and Search Console, with events for form submissions, phone clicks, WhatsApp clicks and bookings. Measuring from day one means the first months of data are usable instead of lost.

Testing calls to action without fooling yourself

A/B testing, showing two versions of a CTA to different visitors and comparing results, is the standard advice. It is good advice for sites with enough traffic and conversions to produce a reliable answer. For many small business sites, it is not.

If a page produces a handful of leads a month, a test comparing two button colors could run for a very long time without a trustworthy result, and an early “winner” may be noise. Small sites are better served by a different approach:

1. Fix the obvious first. Vague text, a broken form, a button hidden on mobile, a pop-up covering the page. These do not need a test.
2. Watch real sessions. Session recordings and heatmap tools show where visitors stop, what they tap and where they get stuck. Respect privacy rules and mask form fields.
3. Ask the people who did convert. One question on the thank-you page or the first call, such as “What almost stopped you from reaching out?”, often reveals the real obstacle.
4. Change one thing at a time and compare before and after over a comparable period, keeping seasonality in mind.
5. Look at lead quality, not only count. A CTA that doubles submissions with people who are not a fit can make the business worse.

Common website call to action mistakes

When the structure of the site itself makes good CTAs hard, a website redesign process that protects existing rankings becomes the better investment.

How GoSocial plans calls to action

At GoSocial, calls to action are planned before design starts, not added at the end. Our websites are built around buyer psychology and strengthened with SEO, AEO and GEO, and the CTA is where that psychology turns into an action the business can follow up on.

In practice that means a few steps on every project. During discovery and strategy, we decide what each page has to produce and who it is for. In architecture, each page gets one primary action, a secondary path and the internal links that lead to it. In design and content, the CTA text is written in the customer’s words and placed where decisions happen, on desktop and on a phone held in one hand. In testing, every form, booking flow, phone link and WhatsApp link is checked end to end. At launch, GA4 and Search Console are in place with events for forms, calls, WhatsApp clicks and bookings, so the first weeks of data are already usable.

We work on both custom-coded and custom WordPress sites, and the domain, hosting account and code belong to the client either way. You can see the result across many industries in our portfolio, and the full approach on our web design services page. Our own first step is the same advice this guide gives: one clear action, explained honestly. It is a short call called a Blueprint Briefing, about what your website has to produce, with no pitch deck.