CTA Arrow Badge

Fetch pattern JSON: curl https://webspire.de/patterns/cta/arrow-badge.json

arrow-badge.html

<section class="ws-cta bg-[oklch(12%_0.02_280)] py-24">
  <div class="mx-auto max-w-4xl px-6 text-center">
    <!-- Eyebrow tag -->
    <span class="mb-6 inline-flex items-center gap-1.5 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-medium tracking-wide text-white/60 uppercase">
      <span class="h-1.5 w-1.5 rounded-full bg-emerald-400"></span>
      Now available
    </span>

    <h2 class="text-balance text-4xl font-bold tracking-tight text-white sm:text-5xl">
      Ship your next project<br class="hidden sm:block"> in record time
    </h2>
    <p class="mx-auto mt-5 max-w-xl text-lg leading-relaxed text-white/55">
      A complete pattern library built for speed. Copy, paste, done.
    </p>

    <!-- Arrow-badge CTA group -->
    <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
      <!-- Primary: pill with trailing arrow badge -->
      <a href="#"
        class="group relative inline-flex items-center gap-0 overflow-hidden rounded-full bg-white pr-2 pl-5 text-sm font-semibold text-gray-900 shadow-lg transition hover:shadow-xl">
        <span class="py-3">Get started free</span>
        <!-- Arrow badge -->
        <span class="ml-3 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[oklch(55%_0.2_280)] text-white transition group-hover:bg-[oklch(50%_0.22_280)]">
          <svg class="h-4 w-4 transition group-hover:translate-x-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z" clip-rule="evenodd"/>
          </svg>
        </span>
      </a>

      <!-- Secondary ghost link -->
      <a href="#" class="inline-flex items-center gap-1.5 text-sm font-medium text-white/55 transition hover:text-white">
        View documentation
        <svg class="h-4 w-4 opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd"/>
        </svg>
      </a>
    </div>

    <!-- Social proof row -->
    <p class="mt-8 text-xs text-white/30">No credit card required &bull; Free plan forever &bull; Deploy in minutes</p>
  </div>
</section>

Details

Family

cta

Tier

enhanced

Kind

section

Extends

cta/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

ctadarkarrowbadgepillbuttonsaaslaunch

Slots

Name	Required	Description
eyebrow	No	Status pill above the heading (e.g. "Now available").
heading	Yes	Primary CTA headline.
subtext	No	Supporting copy beneath the headline.
cta-primary	Yes	Primary pill button with arrow badge.
cta-secondary	No	Ghost link with external arrow icon.
trust-line	No	Small print below the buttons (no credit card, etc.).

A dark-background CTA section with a pill-shaped primary button that has a trailing circular badge containing an arrow icon. The badge uses the brand’s primary color while the pill body stays white — creating a high-contrast, polished look common in SaaS launch pages.

With custom badge color

<a href="#" class="group relative inline-flex items-center ...">
  <span class="py-3">Start building</span>
  <span class="ml-3 flex h-8 w-8 ... bg-[oklch(55%_0.2_145)]"> <!-- green badge -->
    <!-- arrow icon -->
  </span>
</a>