CTA Lab · Visual Playground

01 — Full-Width

Centered Banner CTA

The classic full-width call-to-action with a bold headline, supporting text, and primary + secondary buttons. A staple of landing pages.

Radial glow — dual buttons

<div class="cta-banner">
  <div class="cta-banner-eyebrow">
    <i class="ph ph-sparkle"></i> Limited Time Offer
  </div>
  <h2>Ready to Build<br>Something Amazing?</h2>
  <p>Join thousands of developers shipping faster with our tools. Start your free trial today — no credit card required.</p>
  <div class="cta-banner-actions">
    <button class="btn-primary">
      <i class="ph ph-rocket-launch"></i> Start Free Trial
    </button>
    <button class="btn-secondary">
      <i class="ph ph-play-circle"></i> Watch Demo
    </button>
  </div>
</div>

.cta-banner {
  text-align: center;
  padding: 72px 40px;
  border-radius: 20px;
  background: linear-gradient(135deg,
    rgba(244,63,94,.08), rgba(139,92,246,.08));
  border: 1px solid rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(circle at 30% 40%,
      rgba(244,63,94,.06), transparent 50%),
    radial-gradient(circle at 70% 60%,
      rgba(139,92,246,.06), transparent 50%);
}
.btn-primary {
  padding: 14px 32px; border-radius: 12px;
  background: #f43f5e; color: #fff;
  box-shadow: 0 4px 24px rgba(244,63,94,.3);
  transition: all .2s;
}
.btn-primary:hover {
  background: #e11d48;
  transform: translateY(-2px);
}

02 — Email Capture

Newsletter Signup

Email input paired with a subscribe button. Shown in two variants — inline (horizontal) and stacked (vertical) for different layouts.

Inline form — input + button EMAIL

Stacked form — vertical layout STACKED

<!-- Inline Version -->
<div class="cta-newsletter">
  <h2>Stay in the Loop</h2>
  <p>Get weekly tips on CSS, design patterns, and frontend development. No spam, unsubscribe anytime.</p>
  <form class="nl-form">
    <input class="nl-input" type="email" placeholder="you@example.com"/>
    <button class="nl-btn" type="submit"><i class="ph ph-paper-plane-tilt"></i> Subscribe</button>
  </form>
  <div class="nl-note"><i class="ph ph-shield-check"></i> Join 8,500+ subscribers • No spam ever</div>
</div>

<!-- Stacked Version -->
<div class="cta-newsletter">
  <h2>Weekly Newsletter</h2>
  <p>Curated resources and tutorials delivered every Friday morning.</p>
  <form class="nl-form-stacked">
    <input class="nl-input-stacked" type="text" placeholder="Your name"/>
    <input class="nl-input-stacked" type="email" placeholder="Your email address"/>
    <button class="nl-btn-stacked" type="submit">Subscribe for Free</button>
  </form>
</div>

/* Inline */
.nl-form {
  display: flex; gap: 0;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
.nl-input {
  flex: 1; padding: 14px 20px;
  background: transparent; border: none;
  color: #fff; font-size: 14px;
}
.nl-btn {
  padding: 14px 28px;
  background: #3b82f6; color: #fff;
  font-weight: 600; border: none;
}

/* Stacked */
.nl-form-stacked {
  display: flex; flex-direction: column;
  gap: 12px;
}
.nl-input-stacked {
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
}
.nl-input-stacked:focus {
  border-color: rgba(59,130,246,.4);
}

03 — Two-Column

Split CTA

Image or illustration on one side, compelling copy with feature checklist and CTA button on the other. Great for product pages.

Grid 1fr 1fr — feature list SPLIT

Ship Faster With
Better Components

Our design system gives you production-ready components that look great out of the box.

120+ accessible components

Dark mode built in

Fully responsive & tested

Regular updates & new features

<div class="cta-split">
  <div class="cta-split-visual">
    <i class="ph ph-app-window"></i>
  </div>
  <div class="cta-split-content">
    <h2>Ship Faster With<br>Better Components</h2>
    <p>Our design system gives you production-ready components that look great out of the box.</p>
    <div class="cta-split-features">
      <div class="cta-split-feature"><i class="ph ph-check-circle"></i> 120+ accessible components</div>
      <div class="cta-split-feature"><i class="ph ph-check-circle"></i> Dark mode built in</div>
      <div class="cta-split-feature"><i class="ph ph-check-circle"></i> Fully responsive & tested</div>
      <div class="cta-split-feature"><i class="ph ph-check-circle"></i> Regular updates & new features</div>
    </div>
    <button class="btn-purple">
      <i class="ph ph-download-simple"></i> Get Started Free
    </button>
  </div>
</div>

.cta-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
  padding: 48px; border-radius: 20px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
}
.cta-split-feature {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.55);
}
.cta-split-feature i {
  font-size: 18px; color: #8b5cf6;
}
.btn-purple {
  padding: 14px 32px; border-radius: 12px;
  background: #8b5cf6; color: #fff;
  box-shadow: 0 4px 24px rgba(139,92,246,.3);
}
.btn-purple:hover {
  background: #7c3aed;
  transform: translateY(-2px);
}

04 — Decorative

Gradient Card CTA

A floating card with an animated gradient border. Eye-catching and perfect for a final push at the bottom of a landing page.

Animated gradient border — glow button GRADIENT

Supercharge Your Workflow

From idea to production in minutes, not hours. Try it free for 14 days and see the difference.

<div class="cta-gradient">
  <div class="cta-gradient-inner">
    <div class="cta-gradient-icon">
      <i class="ph ph-lightning"></i>
    </div>
    <h2>Supercharge Your Workflow</h2>
    <p>From idea to production in minutes, not hours. Try it free for 14 days and see the difference.</p>
    <button class="btn-gradient">
      <i class="ph ph-arrow-right"></i> Start Building Now
    </button>
  </div>
</div>

.cta-gradient {
  padding: 3px;
  border-radius: 22px;
  background: linear-gradient(135deg,
    #f43f5e, #f59e0b, #14b8a6, #3b82f6);
  background-size: 300% 300%;
  animation: gradShift 6s ease infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.cta-gradient-inner {
  background: #0c0c14;
  border-radius: 20px;
  padding: 48px;
  text-align: center;
}
.btn-gradient {
  background: linear-gradient(135deg, #f43f5e, #f59e0b);
  box-shadow: 0 4px 24px rgba(244,63,94,.25);
}

05 — Compact Row

Minimal Inline CTA

Compact horizontal CTAs with icon, text, and action button on a single line. Perfect for in-page nudges between content sections.

Flex row — icon + text + button INLINE

Read the Documentation

Comprehensive guides, API reference, and examples

Join the Community

Connect with 5,000+ developers in our Discord server

Book a Demo

See the platform in action with a personalized walkthrough

<div class="cta-inline-list">
  <div class="cta-inline">
    <div class="cta-inline-icon"><i class="ph ph-book-open-text"></i></div>
    <div class="cta-inline-text">
      <h3>Read the Documentation</h3>
      <p>Comprehensive guides, API reference, and examples</p>
    </div>
    <button class="cta-inline-btn">Explore <i class="ph ph-arrow-right"></i></button>
  </div>
  <div class="cta-inline">
    <div class="cta-inline-icon"><i class="ph ph-chats-circle"></i></div>
    <div class="cta-inline-text">
      <h3>Join the Community</h3>
      <p>Connect with 5,000+ developers in our Discord server</p>
    </div>
    <button class="cta-inline-btn">Join <i class="ph ph-arrow-right"></i></button>
  </div>
  <div class="cta-inline">
    <div class="cta-inline-icon"><i class="ph ph-calendar-check"></i></div>
    <div class="cta-inline-text">
      <h3>Book a Demo</h3>
      <p>See the platform in action with a personalized walkthrough</p>
    </div>
    <button class="cta-inline-btn">Schedule <i class="ph ph-arrow-right"></i></button>
  </div>
</div>

.cta-inline {
  display: flex;
  align-items: center; gap: 20px;
  padding: 20px 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.cta-inline-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center;
  justify-content: center;
  background: rgba(20,184,166,.12);
  color: #5eead4; font-size: 20px;
}
.cta-inline-btn {
  padding: 8px 20px; border-radius: 8px;
  background: rgba(20,184,166,.2);
  color: #5eead4;
  font-weight: 600;
}
.cta-inline-btn:hover {
  transform: translateX(2px);
}

06 — Social Proof

Stats CTA

Big numbers for social proof paired with a strong call-to-action. The stats build trust right before asking users to commit.

Stat counters — trust signal STATS

Trusted by Teams Worldwide

The numbers speak for themselves. Join the growing community of builders.

50K+ Active Users

99.9% Uptime

4.9 Avg Rating

12M+ API Calls / Day

SOC 2 Certified • GDPR Compliant • 256-bit Encryption

<div class="cta-stats">
  <h2>Trusted by Teams Worldwide</h2>
  <p>The numbers speak for themselves. Join the growing community of builders.</p>
  <div class="stats-row">
    <div class="stat-item"><span class="stat-val">50K+</span><span class="stat-label">Active Users</span></div>
    <div class="stat-item"><span class="stat-val">99.9%</span><span class="stat-label">Uptime</span></div>
    <div class="stat-item"><span class="stat-val">4.9</span><span class="stat-label">Avg Rating</span></div>
    <div class="stat-item"><span class="stat-val">12M+</span><span class="stat-label">API Calls / Day</span></div>
  </div>
  <button class="btn-green"><i class="ph ph-arrow-right"></i> Get Started for Free</button>
  <div class="cta-stats-trust"><i class="ph ph-shield-check"></i> SOC 2 Certified • GDPR Compliant • 256-bit Encryption</div>
</div>

.stats-row {
  display: flex;
  justify-content: center;
  gap: 48px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #4ade80;
}
.stat-label {
  font-size: 11px;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.btn-green {
  background: #10b981; color: #fff;
  padding: 14px 32px; border-radius: 12px;
  box-shadow: 0 4px 24px rgba(16,185,129,.3);
}
.btn-green:hover {
  background: #059669;
  transform: translateY(-2px);
}

07 — Multi-Action

Stacked Buttons

Three tiers of buttons — primary, secondary, and ghost — with "or" dividers. Gives users multiple entry points at different commitment levels.

Primary + secondary + ghost BUTTONS

Choose Your Path

Whether you want to dive in, explore first, or just stay updated — we have you covered.

or

<div class="cta-buttons-wrap">
  <h2>Choose Your Path</h2>
  <p>Whether you want to dive in, explore first, or just stay updated — we have you covered.</p>
  <div class="cta-btn-stack">
    <button class="cta-btn-xl primary"><i class="ph ph-rocket-launch"></i> Start Free Trial</button>
    <div class="cta-btn-or">or</div>
    <button class="cta-btn-xl secondary"><i class="ph ph-play-circle"></i> Watch Product Tour</button>
    <div class="cta-btn-or">or</div>
    <button class="cta-btn-xl ghost"><i class="ph ph-envelope-simple"></i> Get Updates via Email</button>
  </div>
</div>

.cta-btn-stack {
  display: flex; flex-direction: column;
  gap: 12px; max-width: 340px; margin: 0 auto;
}
.cta-btn-xl {
  padding: 16px 24px; border-radius: 14px;
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center;
  justify-content: center; gap: 10px;
  transition: all .2s;
}
.cta-btn-xl.primary {
  background: #f43f5e; color: #fff;
  box-shadow: 0 4px 20px rgba(244,63,94,.3);
}
.cta-btn-xl.secondary {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.cta-btn-xl.ghost {
  background: transparent;
  border: 1px dashed rgba(255,255,255,.1);
  color: rgba(255,255,255,.5);
}
.cta-btn-or {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: rgba(255,255,255,.2);
}
.cta-btn-or::before, .cta-btn-or::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.06);
}

08 — Persistent

Floating Banner CTA

A sticky bottom bar with icon, message, action button, and dismiss. Great for persistent promotions, cookie notices, or upgrade nudges.

Sticky bottom bar — backdrop blur FLOATING

Floating bar is pinned below

This simulates how a sticky CTA looks at the bottom of a page viewport.

Black Friday Sale — 50% Off

Use code SAVE50 at checkout. Ends midnight.

<!-- Place at end of <body> for real sticky use -->
<div class="cta-float-bar">
  <div class="cta-float-bar-icon">
    <i class="ph ph-megaphone-simple"></i>
  </div>
  <div class="cta-float-bar-text">
    <h4>Black Friday Sale &mdash; 50% Off</h4>
    <p>Use code <strong>SAVE50</strong> at checkout. Ends midnight.</p>
  </div>
  <button class="cta-float-btn">
    <i class="ph ph-shopping-cart"></i> Claim Deal
  </button>
  <button class="cta-float-dismiss">
    <i class="ph ph-x"></i>
  </button>
</div>

/* For real sticky use, add to the bar: */
/* position: fixed; bottom: 0; left: 0; right: 0; */

.cta-float-bar {
  padding: 16px 28px;
  background: rgba(12,12,20,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 16px;
}
.cta-float-bar-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(248,113,113,.12);
  color: #fca5a5; font-size: 18px;
}
.cta-float-btn {
  padding: 10px 24px; border-radius: 10px;
  background: #f43f5e; color: #fff;
  font-weight: 600;
}
.cta-float-dismiss {
  padding: 8px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.3);
  background: none;
}