Call-to-Action Design · Visual Playground

Start here

What makes a call-to-action work

Every page should have one clear job. The CTA is the moment you ask for it. A great CTA is impossible to miss, dead obvious about what happens next, and worded so the value — not the effort — is what the visitor feels.

One clear goal

Decide the single action this page wants, then make that the loudest thing on it. Competing CTAs cancel each other out.

High contrast

The button color should pop against everything around it. If it blends in, it won't get clicked.

Action words

Start with a verb that names the outcome: "Get my free trial", "Start designing", "Download the guide".

Room to breathe

Whitespace around a CTA acts like a spotlight. Crowded buttons feel less clickable.

Big enough to tap

At least 44×44px so thumbs can hit it easily. Generous padding reads as "important".

Reduce the risk

Tiny reassurance near the button — "No card needed", "Cancel anytime" — removes the last hesitation.

The button

CTA button styles

The same button has many looks. Use a bold primary for the main action and a quieter secondary or ghost style for everything else — so the eye always knows which one matters most.

Get started Start free trial Learn more Browse plans Download Sign up free

HTML

<a class="btn btn-primary" href="#">Get started</a>
<a class="btn btn-gradient" href="#">Start free trial →</a>
<a class="btn btn-ghost"   href="#">Browse plans</a>

CSS

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; padding: 12px 24px; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer;
  text-decoration: none; transition: all .2s;
}
.btn:hover { transform: translateY(-2px); }   /* a little lift = "alive" */

.btn-primary  { background: #f97316; color: #fff; }
.btn-gradient { background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; }
.btn-ghost    { background: transparent; color: #f97316; border-color: #f97316; }

One loud button per view: if everything is bold, nothing is. Give the primary action the brightest style and tone the rest down to ghost or text links.

Patterns

CTA section patterns

A CTA is rarely just a button — it's a little moment built around it. These are the patterns you'll see on almost every modern site. Each one is live; the code is right below it.

1 · The hero CTA

A short, benefit-led headline, one sentence, and a single bold button. The first thing visitors see.

Build your first website today

Drag, drop, publish. No code, no credit card, no catch.

Start building free

Free forever · Upgrade anytime

HTML

<section class="cta-hero">
  <h3>Build your first website today</h3>
  <p>Drag, drop, publish. No code, no credit card, no catch.</p>
  <a class="btn btn-gradient btn-lg" href="#">Start building free</a>
  <div class="sub">Free forever · Upgrade anytime</div>
</section>

CSS

.cta-hero {
  text-align: center; padding: 44px 28px; border-radius: 14px;
  background: linear-gradient(135deg, #111827, #3b0764); color: #fff;
}
.cta-hero h3  { font-size: 2rem; font-weight: 800; margin: 0 0 8px; }
.cta-hero p   { color: rgba(255,255,255,.7); margin: 0 auto 20px; max-width: 440px; font-size: .92rem; }
.cta-hero .sub { font-size: .76rem; color: rgba(255,255,255,.45); margin-top: 12px; }

/* the button it contains */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; padding: 12px 24px; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer;
  text-decoration: none; transition: all .2s;
}
.btn:hover    { transform: translateY(-2px); }
.btn-gradient { background: linear-gradient(135deg, #f97316, #ec4899); color: #fff; }
.btn-lg       { font-size: 1.1rem; padding: 16px 34px; }

2 · Newsletter sign-up

An input glued to a button. Keep it to one field — every extra field drops sign-ups.

Get the weekly design tips

One short email every Friday. Unsubscribe anytime.

HTML

<form class="cta-news">
  <div class="nt">
    <h3>Get the weekly design tips</h3>
    <p>One short email every Friday. Unsubscribe anytime.</p>
  </div>
  <input type="email" placeholder="you@example.com" aria-label="Email address">
  <button class="btn btn-primary">Subscribe</button>
</form>

CSS

.cta-news {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: center;
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 14px; padding: 26px;
}
.cta-news .nt { flex: 1 1 100%; text-align: center; }   /* heading row spans full width */
.cta-news h3  { color: #1d1d1f; font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.cta-news p   { color: #92400e; font-size: .85rem; }
.cta-news input {
  flex: 1 1 220px;                       /* grows; wraps under on mobile */
  padding: 13px 16px; border: 1px solid #fdba74;
  border-radius: 10px; font: inherit;
}
.cta-news input:focus { outline: none; border-color: #f97316; }

/* the button it contains */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; padding: 12px 24px; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer; transition: all .2s;
}
.btn-primary { background: #f97316; color: #fff; }

3 · The full-width banner

A bold strip near the end of a page that catches anyone who scrolled all the way down. Message on the left, button on the right.

HTML

<section class="cta-banner">
  <div class="bt">
    <strong>Ready to launch?</strong>
    <span>Join 12,000+ students already building.</span>
  </div>
  <a class="btn btn-white" href="#">Create your account</a>
</section>

CSS

.cta-banner {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #f97316, #ec4899); color: #fff;
  border-radius: 14px; padding: 20px 26px;
}
.cta-banner .bt strong { display: block; font-size: 1.1rem; }
.cta-banner .bt span   { font-size: .85rem; opacity: .85; }

/* the button it contains */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; padding: 12px 24px; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer;
  text-decoration: none; transition: all .2s;
}
.btn-white { background: #fff; color: #c2410c; }

4 · The pricing card CTA

The button at the bottom of a plan. The value (features + price) does the selling; the CTA just closes it.

Pro

$12/mo

Unlimited projects
Custom domain
Priority support

Choose Pro

HTML

<div class="cta-card">
  <div class="top"></div>
  <div class="body">
    <h3>Pro</h3>
    <div class="price">$12<small>/mo</small></div>
    <ul>
      <li><i class="ph-fill ph-check-circle"></i> Unlimited projects</li>
      <li><i class="ph-fill ph-check-circle"></i> Custom domain</li>
      <li><i class="ph-fill ph-check-circle"></i> Priority support</li>
    </ul>
    <a class="btn btn-primary" href="#">Choose Pro</a>
  </div>
</div>

CSS

.cta-card {
  max-width: 320px; margin: 0 auto; background: #fff;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.cta-card .top  { background: linear-gradient(135deg, #f97316, #ec4899); height: 80px; }
.cta-card .body { padding: 22px; text-align: center; }
.cta-card h3    { color: #1d1d1f; font-size: 1.2rem; margin-bottom: 4px; }
.cta-card .price { font-size: 2.2rem; font-weight: 800; color: #1d1d1f; }
.cta-card .price small { font-size: .8rem; color: #6b7280; font-weight: 500; }
.cta-card ul { list-style: none; text-align: left; margin: 16px 0; display: grid; gap: 8px; }
.cta-card li { font-size: .85rem; color: #374151; display: flex; gap: 8px; align-items: center; }
.cta-card li i { color: #16a34a; }
.cta-card .btn { width: 100%; justify-content: center; }

/* the button it contains */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; padding: 12px 24px; border-radius: 10px;
  border: 2px solid transparent; cursor: pointer;
  text-decoration: none; transition: all .2s;
}
.btn-primary { background: #f97316; color: #fff; }

Label the button with the choice: "Choose Pro" beats a row of identical "Sign up" buttons — the visitor knows exactly what they're picking.

The words

Write CTA copy that converts

The label on the button does more work than its color. Lead with the verb, name the value, and write from the visitor's point of view. "Get my free guide" beats "Submit" every time.

Weak"Submit"

Better"Get my free guide"

Weak"Sign up"

Better"Start my free trial"

Weak"Learn more"

Better"See how it works"

Weak"Buy now"

Better"Add to cart — free shipping"

The first-person trick: writing the button as the visitor would say it — "Start my free trial" — consistently out-clicks the second-person "Start your trial". Finish the sentence "I want to…".

Strategy

Placement & psychology

Where the CTA sits and what surrounds it matters as much as the button itself.

Above the fold

Put the primary CTA where it's visible without scrolling — then repeat it further down for people who needed convincing.

Directional cues

Whitespace, arrows, or a person looking toward the button quietly guide the eye to it.

Gentle urgency

"Offer ends Sunday" or "3 spots left" nudges action — but only when it's true. Fake urgency destroys trust.

Social proof nearby

"Joined by 12,000 students" right by the button borrows other people's confidence.

Less friction

Ask for as little as possible at the click. One field, one decision. Save the rest for later.

Sticky when long

On long pages, a small CTA pinned to the header or a mobile bottom bar keeps the action always reachable.

In practice

Do & don't

Do

Use one bold primary CTA per view
Start the label with an action verb
Make it high-contrast and big enough to tap
Surround it with whitespace
Add a tiny risk-reducer ("No card needed")
Give it a clear hover & focus state

Don't

Crowd the page with equally-loud buttons
Label it "Submit", "Click here", or "OK"
Hide it in a low-contrast color
Make tap targets tiny or jammed together
Fake urgency or countdowns that reset
Ask for ten form fields before the click

Keep going: a CTA lives inside good layout and copy — pair this with UX Best Practices, Landing Pages, and Forms Lab.

Recap

The CTA checklist

One clear goal per page. A high-contrast button that's big enough to tap, wrapped in whitespace, labelled with an action verb from the visitor's point of view, backed by a little proof and a risk-reducer, placed above the fold and repeated as the page gets long. Get those right and the click takes care of itself.