Call-to-action band

Four variants — split, centred, boxed and inline — for the end of a page.

<!-- 1. split -->
<section class="cta split">
  <div>
    <h2>Ready to deploy?</h2>
    <p>Put a site online in the time it takes to make coffee. No card needed.</p>
  </div>
  <a class="btn" href="/start/">Start building</a>
</section>

<!-- 2. centred, dark -->
<section class="cta centred dark">
  <h2>Stop maintaining the glue</h2>
  <p>One platform instead of four, and nothing between them to break.</p>
  <div class="pair">
    <a class="btn light" href="/start/">Get started free</a>
    <a class="btn quiet" href="/demo/">Book a walkthrough</a>
  </div>
  <p class="fine">Free for personal projects · Cancel any time</p>
</section>

<!-- 3. boxed with a border accent -->
<section class="cta boxed">
  <h2>Migrating from somewhere else?</h2>
  <p>We will move your first ten projects across at no cost, usually within a day.</p>
  <a class="btn" href="/migrate/">Talk to us about moving</a>
</section>

<!-- 4. inline, for the middle of an article -->
<aside class="cta inline">
  <p><strong>Related:</strong> this is easier with the CLI. <a href="/cli/">Read the two-minute setup →</a></p>
</aside>

* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.65 system-ui, -apple-system, sans-serif; background: #f6f8fb; padding: 22px; }

.cta {
  max-width: 940px;
  margin: 0 auto 20px;
  padding: 34px 36px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e7ef;
}

.cta h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: -0.02em;
  color: #16202e;
  text-wrap: balance;
}

.cta p { color: #5b6b83; margin-top: 8px; }

.btn {
  display: inline-block;
  font-size: .97rem;
  font-weight: 500;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 10px;
  background: #3b4fe4;
  color: #fff;
  white-space: nowrap;
  border: 1px solid #3b4fe4;
}

.btn:hover { background: #2a3abf; border-color: #2a3abf; }

/* ---- 1. split ---- */
.split { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.split .btn { margin-left: auto; }

/* ---- 2. centred, dark ---- */
.centred { text-align: center; }

.dark {
  background: #101b2d;
  background-image: radial-gradient(80% 120% at 50% 0%, rgba(59, 79, 228, .4), transparent 62%);
  border-color: transparent;
  padding: 48px 36px;
}

.dark h2 { color: #fff; }
.dark p { color: #b9c6dd; }

.pair { margin-top: 24px; display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.btn.light { background: #fff; color: #101b2d; border-color: #fff; }
.btn.light:hover { background: #e6ebf6; border-color: #e6ebf6; }
.btn.quiet { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn.quiet:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.fine { margin-top: 16px; font-size: .82rem; color: #7e8ead; }

/* ---- 3. boxed ---- */
.boxed { border-left: 4px solid #3b4fe4; }
.boxed .btn { margin-top: 20px; }

/* ---- 4. inline ---- */
.inline {
  padding: 16px 20px;
  border-radius: 10px;
  background: #eef0fe;
  border: 1px solid #dbe0fd;
}
.inline p { color: #2a3abf; margin: 0; font-size: .94rem; }
.inline strong { color: #16202e; }
.inline a { color: #2a3abf; font-weight: 500; }

@media (max-width: 640px) {
  .cta { padding: 26px 22px; }
  .split .btn { margin-left: 0; width: 100%; text-align: center; }
  .pair .btn { width: 100%; }
}

<section class="cta split">
  <div>
    <h2>Ready to deploy?</h2>
    <p>Put a site online in the time it takes to make coffee. No card needed.</p>
  </div>
  <a class="btn" href="/start/">Start building</a>
</section>

<section class="cta centred dark">
  <h2>Stop maintaining the glue</h2>
  <p>One platform instead of four, and nothing between them to break.</p>
  <div class="pair">
    <a class="btn light" href="/start/">Get started free</a>
    <a class="btn quiet" href="/demo/">Book a walkthrough</a>
  </div>
  <p class="fine">Free for personal projects · Cancel any time</p>
</section>

<section class="cta boxed">
  <h2>Migrating from somewhere else?</h2>
  <p>We will move your first ten projects across at no cost, usually within a day.</p>
  <a class="btn" href="/migrate/">Talk to us about moving</a>
</section>

<aside class="cta inline">
  <p><strong>Related:</strong> this is easier with the CLI. <a href="/cli/">Read the two-minute setup →</a></p>
</aside>

* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.65 system-ui, -apple-system, sans-serif; background: #f6f8fb; padding: 22px; }

.cta {
  max-width: 940px;
  margin: 0 auto 20px;
  padding: 34px 36px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e7ef;
}

.cta h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  letter-spacing: -0.02em;
  color: #16202e;
  text-wrap: balance;
}

.cta p { color: #5b6b83; margin-top: 8px; }

.btn {
  display: inline-block;
  font-size: .97rem;
  font-weight: 500;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 10px;
  background: #3b4fe4;
  color: #fff;
  white-space: nowrap;
  border: 1px solid #3b4fe4;
}

.btn:hover { background: #2a3abf; border-color: #2a3abf; }

/* ---- 1. split ---- */
.split { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.split .btn { margin-left: auto; }

/* ---- 2. centred, dark ---- */
.centred { text-align: center; }

.dark {
  background: #101b2d;
  background-image: radial-gradient(80% 120% at 50% 0%, rgba(59, 79, 228, .4), transparent 62%);
  border-color: transparent;
  padding: 48px 36px;
}

.dark h2 { color: #fff; }
.dark p { color: #b9c6dd; }

.pair { margin-top: 24px; display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.btn.light { background: #fff; color: #101b2d; border-color: #fff; }
.btn.light:hover { background: #e6ebf6; border-color: #e6ebf6; }
.btn.quiet { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
.btn.quiet:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.fine { margin-top: 16px; font-size: .82rem; color: #7e8ead; }

/* ---- 3. boxed ---- */
.boxed { border-left: 4px solid #3b4fe4; }
.boxed .btn { margin-top: 20px; }

/* ---- 4. inline ---- */
.inline {
  padding: 16px 20px;
  border-radius: 10px;
  background: #eef0fe;
  border: 1px solid #dbe0fd;
}
.inline p { color: #2a3abf; margin: 0; font-size: .94rem; }
.inline strong { color: #16202e; }
.inline a { color: #2a3abf; font-weight: 500; }

@media (max-width: 640px) {
  .cta { padding: 26px 22px; }
  .split .btn { margin-left: 0; width: 100%; text-align: center; }
  .pair .btn { width: 100%; }
}

How it works

Four variants for four positions on a page. The split band is for the end of a landing page, the dark centred one for a dedicated conversion moment, the boxed one for a specific offer, and the inline one for the middle of an article.

margin-left: auto rather than space-between. With justify-content: space-between the gap between the text and the button grows as the container widens, and on a long heading the button gets pushed off in an odd way. An auto margin keeps the text block intact and pushes only the button.

One action, or one action plus a quiet one. Two equally weighted buttons make people choose before they know enough, and the usual result is that they choose neither. The second button in the dark variant is deliberately outlined rather than filled.

The fine print goes under the buttons, not above. "No card needed" answers the objection someone has immediately after they have decided to click, which is where it does the most work.

Full-width buttons below 640 pixels. Two side-by-side buttons on a phone give you two cramped tap targets instead of one comfortable one.

The inline variant is an aside. It is tangentially related to the surrounding article, which is exactly what <aside> means. A <div> would render the same and say nothing.

Accessibility notes

Every action here is a link, because they navigate. Use a <button> only when something happens on the same page.

Check contrast on the quiet button in the dark variant: a white outline at 30 percent opacity is decorative, but the label on it must still clear 4.5:1 against the background behind it. White text on this gradient does.

Do not use a heading level just because the text looks like a heading. If the band sits inside an article, an <h2> may break the outline — match the level to where it sits in the document, not to its size.

Making it yours

The button label should describe what happens, not what the button is. "Start building" and "Book a walkthrough" beat "Submit" and "Click here", and they help screen reader users who pull up a list of links on the page.

The arrow in the inline variant is a literal character in the text rather than an icon, so it is copied with the link and needs no extra markup. Keep it out of the accessible name if you use a real icon — decorative arrows should be aria-hidden.

For the dark band, the gradient generator will build the radial wash. Keep it large and faint; a small strong gradient reads as a blob behind the text.

Check your version

Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.

Call-to-action band

How it works

Accessibility notes

Making it yours

Related templates

Testimonials

Stats band

Newsletter signup

Centered hero

Check your version