CTA Section Designs — Copy Call-to-Action Components

Ad Slot — Below Header (728×90 Leaderboard)

6 components. Pick one, check it in Preview, open Code to read it, then Copy code — you get the complete HTML and its CSS in one self-contained snippet, so it pastes in looking exactly like the preview.

Dark Banner

HTML + CSS · self-contained13 lines

<section class="nxa1">
  <h2>Ready to get started?</h2>
  <p>Join thousands of developers using our tools every day.</p>
  <a href="#" class="nxa1-btn">Start free <span aria-hidden="true">→</span></a>
</section>
<style>
.nxa1, .nxa1 * { box-sizing: border-box; }
.nxa1 { width: 100%; padding: clamp(32px, 6vw, 52px) 20px; border-radius: 18px; background: #2a1f1a; color: #faf6f0; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxa1 h2 { margin: 0 0 8px; font: 700 clamp(24px, 4.5vw, 34px)/1.2 Georgia,"Times New Roman",serif; }
.nxa1 p { margin: 0 auto 22px; max-width: 420px; color: #d4c5a9; font-size: 15.5px; line-height: 1.55; }
.nxa1-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 28px; border-radius: 999px; background: #a24832; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .2s; }
.nxa1-btn:hover { background: #c4573c; }
</style>

Split

HTML + CSS · self-contained23 lines

<section class="nxa2">
  <div>
    <h2>Start your 14-day free trial</h2>
    <p>No credit card required. Cancel any time.</p>
  </div>
  <div class="nxa2-actions">
    <a href="#" class="nxa2-btn">Get started</a>
    <a href="#" class="nxa2-btn nxa2-ghost">Talk to sales</a>
  </div>
</section>
<style>
.nxa2, .nxa2 * { box-sizing: border-box; }
.nxa2 { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; width: 100%; padding: clamp(22px, 4vw, 36px); border: 1px solid #ece4d8; border-radius: 18px; background: #fff; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxa2 > div:first-child { flex: 1 1 280px; }
.nxa2 h2 { margin: 0 0 6px; font: 700 clamp(21px, 3.5vw, 26px)/1.25 Georgia,"Times New Roman",serif; }
.nxa2 p { margin: 0; color: #6d645a; font-size: 15px; }
.nxa2-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.nxa2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1.5px solid #2a1f1a; border-radius: 12px; background: #2a1f1a; color: #faf6f0; font-weight: 600; font-size: 15px; text-decoration: none; }
.nxa2-btn:hover { background: #a24832; border-color: #a24832; }
.nxa2-ghost { background: transparent; color: #2a1f1a; }
.nxa2-ghost:hover { color: #fff; }
@media (max-width: 420px) { .nxa2-actions, .nxa2-btn { width: 100%; } }
</style>

HTML + CSS · self-contained23 lines

<section class="nxa3">
  <div class="nxa3-icon" aria-hidden="true">📬</div>
  <h2>Get new components first</h2>
  <p>One email when we add something. That’s it.</p>
  <form class="nxa3-form" action="#" method="post">
    <label class="nxa3-sr" for="nxa3-email">Email address</label>
    <input id="nxa3-email" type="email" name="email" placeholder="[email protected]" autocomplete="email" required>
    <button type="submit">Notify me</button>
  </form>
</section>
<style>
.nxa3, .nxa3 * { box-sizing: border-box; }
.nxa3 { width: 100%; padding: clamp(28px, 5vw, 44px) 20px; border-radius: 18px; background: #f3e2d9; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxa3-icon { font-size: 34px; margin-bottom: 6px; }
.nxa3 h2 { margin: 0 0 6px; font: 700 clamp(22px, 4vw, 28px)/1.25 Georgia,"Times New Roman",serif; }
.nxa3 p { margin: 0 0 20px; color: #6d4f3f; font-size: 15px; }
.nxa3-form { display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px; margin: 0 auto; }
.nxa3-form input { flex: 1 1 200px; min-width: 0; min-height: 48px; padding: 0 16px; border: 1.5px solid #e2c8b8; border-radius: 12px; background: #fff; color: #2a1f1a; font: 16px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; outline: none; }
.nxa3-form input:focus { border-color: #a24832; }
.nxa3-form button { flex: 1 0 auto; min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px; background: #a24832; color: #fff; font: 600 15px system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; cursor: pointer; }
.nxa3-form button:hover { background: #8a3a27; }
.nxa3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
</style>

Gradient Card

HTML + CSS · self-contained18 lines

<section class="nxa4">
  <h2>Build faster. Launch sooner.</h2>
  <p>Grab the full kit — 120+ blocks, Figma file included.</p>
  <div class="nxa4-actions">
    <a href="#" class="nxa4-btn">Download the kit</a>
    <a href="#" class="nxa4-btn nxa4-alt">Browse blocks</a>
  </div>
</section>
<style>
.nxa4, .nxa4 * { box-sizing: border-box; }
.nxa4 { width: 100%; padding: clamp(32px, 6vw, 56px) 20px; border-radius: 22px; background: linear-gradient(135deg, #e0603a 0%, #a24832 45%, #5b3fd1 100%); color: #fff; text-align: center; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.nxa4 h2 { margin: 0 0 10px; font: 800 clamp(26px, 5vw, 40px)/1.12 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: -.02em; }
.nxa4 p { margin: 0 auto 24px; max-width: 420px; color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.55; }
.nxa4-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nxa4-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: #fff; color: #2a1f1a; font-weight: 700; font-size: 15px; text-decoration: none; }
.nxa4-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.nxa4-alt { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
</style>

Announcement Bar

HTML + CSS · self-contained13 lines

<div class="nxa5" role="region" aria-label="Announcement">
  <span class="nxa5-tag">New</span>
  <p>Version 3.0 is out — dark mode, faster builds and 40 new blocks.</p>
  <a href="#" class="nxa5-link">See what’s new <span aria-hidden="true">→</span></a>
</div>
<style>
.nxa5, .nxa5 * { box-sizing: border-box; }
.nxa5 { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; width: 100%; padding: 8px 16px; border-radius: 12px; background: #2a1f1a; color: #faf6f0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size: 14.5px; text-align: center; }
.nxa5-tag { padding: 3px 10px; border-radius: 999px; background: #f2b84b; color: #2a1f1a; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.nxa5 p { margin: 0; line-height: 1.45; }
.nxa5-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: #f2b84b; font-weight: 700; text-decoration: none; }
.nxa5-link:hover { text-decoration: underline; text-underline-offset: 4px; }
</style>

App Download

HTML + CSS · self-contained27 lines

<section class="nxa6">
  <div class="nxa6-copy">
    <h2>Take it with you</h2>
    <p>Get the app for iPhone and Android. Everything syncs instantly.</p>
    <div class="nxa6-stores">
      <a href="#" class="nxa6-store"><small>Download on the</small><b>App Store</b></a>
      <a href="#" class="nxa6-store"><small>Get it on</small><b>Google Play</b></a>
    </div>
  </div>
  <div class="nxa6-phone" aria-hidden="true"><div><i></i><i></i><i></i></div></div>
</section>
<style>
.nxa6, .nxa6 * { box-sizing: border-box; }
.nxa6 { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; width: 100%; padding: clamp(24px, 5vw, 40px); border-radius: 20px; background: #eef2e6; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color: #2a1f1a; }
.nxa6-copy { flex: 1 1 280px; }
.nxa6 h2 { margin: 0 0 8px; font: 700 clamp(24px, 4.5vw, 32px)/1.2 Georgia,"Times New Roman",serif; }
.nxa6 p { margin: 0 0 20px; color: #5a5f4a; font-size: 15.5px; line-height: 1.55; }
.nxa6-stores { display: flex; flex-wrap: wrap; gap: 10px; }
.nxa6-store { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 6px 18px; border-radius: 12px; background: #111; color: #fff; text-decoration: none; line-height: 1.15; }
.nxa6-store small { font-size: 11px; opacity: .8; }
.nxa6-store b { font-size: 17px; }
.nxa6-store:hover { background: #333; }
.nxa6-phone { flex: 0 0 auto; width: 120px; height: 200px; margin: 0 auto; padding: 10px; border-radius: 26px; background: #2a1f1a; }
.nxa6-phone div { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px 10px; border-radius: 18px; background: linear-gradient(#f7f3ea, #e4ead6); }
.nxa6-phone i { display: block; height: 24px; border-radius: 6px; background: #fff; }
.nxa6-phone i:first-child { height: 50px; background: #5a6340; }
</style>

Class names carry a unique prefix, so several snippets can sit on one page without clashing. Colours and fonts are plain CSS values — change them to match your brand.

Ad Slot — Mid Content (Responsive In-Article)

💡

What Is This?

Gallery of Call-to-Action section designs
Includes banner, inline, and full-width CTA styles
Gradient backgrounds and email capture forms
Designed to drive conversions and engagement
Copy HTML/CSS and customize messaging

🛠️

How to Use

Browse CTA section designs in the gallery
Preview each design with action buttons and forms
Copy the HTML and CSS code
Replace placeholder text with your own messaging
Customize button colors and background styles

🎯

Use Cases

Adding conversion-focused CTA sections to landing pages
Building newsletter signup and lead capture areas
Creating app download promotion sections
Designing trial signup and demo request CTAs
Prototyping high-conversion website sections

Ad Slot — Bottom (300×250 Rectangle)

📢 CTA Sections