A good call to action is a short, verb-first button label that names what the visitor gets, plus one line of microcopy that removes their main worry. Here are 60 original examples grouped by page type (hero, pricing, form, email and more), each with a button design and why it works.
A call to action (CTA) is the element that asks the visitor to do the next thing: a button, a link or sometimes a form. Most CTAs that work share three traits:
Every example below was written for this page; none is copied from a real company. Swap in your own offer, and only keep a claim (a deadline, a reply time, a free plan) if it is true for you.
Search by word ("free", "trial", "book") or by page type ("pricing", "email").
Jump to: Hero section · Pricing page · Form · Email · Product page · Blog and newsletter · App onboarding
The first button a visitor sees. It should name the first step, not the whole journey.
No card needed. Cancel in two clicks.
Why it works: Pairs the action with the two worries people have before a trial: payment and getting out.
A local technician calls back within one working day.
Why it works: Says what "free" gets you and when something will happen.
Connect a spreadsheet and get a dashboard in minutes.
Why it works: Promises a personal result instead of a generic demo.
Three questions. Price on screen, no sales call.
Why it works: First person ("my") plus a clear size of effort.
Answer five questions and get a meal plan you can print.
Why it works: Names a concrete output the visitor can picture.
Search by postcode, day or level.
Why it works: Matches the visitor's real question (where and when) instead of "Learn more".
Opens in your browser. Nothing to install.
Why it works: Low-commitment verb plus removal of the install barrier.
Live calendar for the next 60 days.
Why it works: For bookings, availability is the first question, so lead with it.
Pick your equipment and how long you have.
Why it works: The visitor builds something; the microcopy shows it adapts to them.
A 12-page PDF. We email it to you once.
Why it works: Sets exact expectations about what arrives and how often.
Free plan stays free. Upgrade only if you need more.
Why it works: Answers the unspoken "free for how long?" question.
Fifteen minutes, on your schedule.
Why it works: Positions the call as expert help and caps the time.
Visitors here are comparing. Each plan button should say what happens next for that plan.
Billed monthly. Change plans any time.
Why it works: Uses the plan name so the click feels like a deliberate choice.
You pick a plan on day 14, or nothing happens.
Why it works: Explains the end of the trial, the moment people fear.
Includes everything in Starter, plus team seats.
Why it works: Short verb plus plan, with the difference spelled out below.
For 50+ seats, custom contracts or invoicing.
Why it works: Tells visitors who this button is for so the wrong ones skip it.
Pay for ten months, use for twelve.
Why it works: Turns a discount into a plain, checkable sum.
Your current work and settings carry over.
Why it works: For existing users the fear is losing work; the microcopy removes it.
You can move up a plan without losing anything.
Why it works: "Start with" frames the cheap plan as a first step, not a final choice.
One payment. Updates for this version included.
Why it works: For one-off pricing, states the model clearly next to the button.
Full table, plan by plan.
Why it works: A secondary action for visitors not ready to choose yet.
Most teams of 5 to 20 people start here.
Why it works: Guidance based on fit, not invented popularity.
The submit button is the last thing read before committing. Say what the visitor gets, not what the form does.
You will get it by email within the hour.
Why it works: Replaces "Submit" with the outcome and a time.
Next: pick a username.
Why it works: Shows there is one more step so it does not feel like a trap.
Weekdays 8am to 6pm. We will not call outside these hours.
Why it works: Respects the visitor's time and states the limits.
We will email the joining link and a calendar invite.
Why it works: Ownership ("my seat") plus what arrives next.
Your score appears on the next screen.
Why it works: For quizzes, the payoff is the result, so name it.
A real person replies, usually the same day.
Why it works: Sets a human expectation without promising an exact time.
One email when we launch. Nothing before.
Why it works: Small promise about email volume lowers the cost of signing up.
Takes about 10 minutes. You can save and finish later.
Why it works: Honest length plus a safety net for long forms.
Works in Google Sheets and Excel.
Why it works: Answers "will it work for me?" at the moment of clicking.
Free to cancel up to 24 hours before.
Why it works: Puts the cancellation rule where the decision happens.
In email the button competes with every other message in the inbox. Be literal: the reader should know exactly where the link goes.
Two steps left. About three minutes.
Why it works: Progress framing for an onboarding reminder.
Track delivery and change the address.
Why it works: Lists what the reader can do after clicking.
Code applied at checkout. Ends Sunday at midnight.
Why it works: A real, dated deadline (only if it is real).
Sam asked a question about your listing.
Why it works: Names the person, which makes the message feel specific.
About a six-minute read.
Why it works: For newsletters, the time cost helps people choose now or later.
Your plan ends on the date shown above.
Why it works: Ties the action to a fact already in the email.
One tap. Takes ten seconds.
Why it works: Feedback requests work better when the effort is clearly tiny.
Your cart is saved for seven days.
Why it works: Reassures that nothing was lost.
This link expires in 24 hours.
Why it works: Transactional: plain verb, plain consequence.
Your appointment was moved. Pick any open slot.
Why it works: Gives control back after a change the reader did not ask for.
Visitors are close to buying and looking for reasons to wait. Remove those reasons beside the button.
Free returns within 30 days.
Why it works: Standard label people scan for, with the main risk removed.
Ships tomorrow if ordered before 2pm.
Why it works: A real dispatch cut-off gives a reason to act today.
Use the size chart or enter your usual size in other brands.
Why it works: Solves the most common hesitation for clothing.
One email when it is in stock.
Why it works: Keeps an out-of-stock visitor instead of losing them.
Preview the engraving before you pay.
Why it works: Shows the visitor stays in control of the result.
Saved to your account, visible on any device.
Why it works: A softer action for people not ready to buy.
Readers came for content, not a sales pitch. Offer more of what they already chose.
One email every Thursday. Unsubscribe in one click.
Why it works: Frequency and exit stated up front.
The steps from this article on one printable page.
Why it works: A content upgrade directly tied to what they just read.
Practical tips for small shops, twice a month.
Why it works: One word is fine when the microcopy names the audience and rhythm.
Make a copy in your own account. Free.
Why it works: Turns reading into doing immediately.
Part 2: setting prices.
Why it works: Names the next topic so the click has a clear payoff.
We answer reader questions in the next issue.
Why it works: Invites participation and says what happens with it.
New users decide in the first minutes whether the product is worth learning. Each button should move them to their first useful result.
You can rename or delete it later.
Why it works: Removes fear of making a permanent mistake.
From a CSV file or your email account.
Why it works: Gets real data in early, which makes the app useful sooner.
They get the same view you have.
Why it works: Explains what the invitee will see before you send it.
You can do this later in Settings.
Why it works: A visible way out reduces drop-off on optional steps.
You choose the time. Off by default.
Why it works: Asks for permission with control left to the user.
Five short steps. Close it any time.
Why it works: States the length so the tour feels optional and small.
| Formula | Pattern | Example |
|---|---|---|
| Verb + outcome | [Get / See / Start] + [thing they want] | Get my quote |
| Verb + "my" + object | First person makes it feel owned | Plan my first week |
| Verb + object + time | Adds how long it takes | Get a price in 2 minutes |
| Verb + object + risk remover | Remover usually goes in microcopy | Start free trial / No card needed |
| Next step, named | For multi-step flows | Continue to delivery |
| Question answered | Mirror what they came to find | Check availability |
Need headline ideas to sit above the button? Try the headline generator.
Pick a verb, an object and a line of microcopy to see the button and copy its HTML.
Plain CSS for a primary and a secondary button with focus, hover, pressed and disabled states. Or design your own with the CSS button generator and browse ready-made button components.
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
font: 600 1rem/1.2 system-ui, sans-serif;
text-decoration: none;
cursor: pointer;
transition: background-color 150ms, transform 100ms;
}
.btn-primary {
background: #1d4ed8;
color: #ffffff;
border: 0;
}
.btn-primary:hover { background: #1e40af; }
.btn-primary:active { transform: translateY(1px); }
.btn:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: 2px;
}
.btn-secondary {
background: transparent;
color: #111827;
border: 2px solid #111827;
}
.btn-secondary:hover { background: #111827; color: #ffffff; }
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}The same primary button with Tailwind classes:
<a href="/signup">
Start your free trial
</a>For a full closing section around the button, see the CTA section components.
These are things worth testing, not predictions of what will win. Results depend on your audience and offer, so test one change at a time and wait for enough visitors before deciding (the A/B test calculator tells you whether a difference is likely to be real).
For how CTAs fit into the rest of the page, see what is a landing page.
A call to action is the button, link or form that asks a visitor to take the next step, such as starting a trial, booking a call or buying. A clear one names the outcome and starts with a verb.
Usually two to five. Put extra detail, such as price, time or what happens next, in a short line of microcopy beside or below the button instead of in the label.
Microcopy is the short line next to a call to action that removes a worry, for example "No card needed" or "Free to cancel up to 24 hours before". It should only state things that are true for your offer.
There is no single best color. What matters is that the button stands out from its background and the rest of the page, and that its label has at least a 4.5:1 contrast ratio with the button color.
A page can repeat the same primary action several times, for example in the hero and at the end. Avoid showing two different primary actions with equal weight in the same view; make the second one an outline button or a text link.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.