CTA band

CTA 밴드

A full-width band, usually with a contrasting background, that asks for exactly one action.

Also known as: Call-to-action bandClosing banner
···
html
<div class="band">
  <h2>Ready to get started?</h2>
  <p>Join thousands of teams already shipping faster.</p>
  <button class="btn">Start free trial</button>
</div>
css
.band{width:min(92%,760px);height:min(88%,220px);border-radius:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(6px,1.6vmin,12px);text-align:center;padding:6%}
.band h2{margin:0;font-size:clamp(13px,3.2vmin,24px);font-weight:800;color:#fff}
.band p{margin:0;font-size:clamp(8px,1.6vmin,12px);color:rgba(255,255,255,.85)}
.btn{margin-top:clamp(4px,1vmin,8px);font-size:clamp(8px,1.6vmin,12px);font-weight:700;padding:.7em 1.6em;
  border-radius:8px;border:none;background:#fff;color:var(--accent);animation:glow 2.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}

Most often sits at the very bottom of the page, right above the footer — one last ask after everyone has already scrolled through. Keep the headline short and the CTA count to one (two at most).

Swapping in a contrasting background (an accent color, or something dark) against the surrounding sections gives the page a visual full stop: this is where it ends. The button should have strong contrast against that background — the loudest color on the page is fair game here, since it's the last stop.

Two CTAs of similar visual weight makes visitors hesitate and often leave without clicking either (choice overload). Repeating the same CTA multiple times through the page — hero, mid-page, and here — is fine and often better: it lets people act whenever they're ready.

When to use

Anywhere a visitor might exit, but especially the very bottom. Even if they've already seen the same CTA higher up, repeating it once more here still helps.