Open demo

CSS code

HTML 
<footer class="fcta">
  <h2>Stop reading. <em>Start shipping.</em></h2>
  <p class="lead">Join 28,000 teams who moved their reporting to Meridian and got their Fridays back.</p>
  <a class="go" href="#">Start your free trial</a>
  <div class="base">
    <p>© Meridian</p>
    <nav aria-label="Footer"><ul><li><a href="#">Pricing</a></li><li><a href="#">Docs</a></li><li><a href="#">Privacy</a></li><li><a href="#">X / Twitter</a></li></ul></nav>
  </div>
</footer>
CSS 
/* Conversion footer: a giant two-tone headline, one pill button and a slim legal row, on a dark panel with a rounded top. */
.fcta{--fcta-bg:#141414;--fcta-accent:#a3e635;--fcta-on-accent:#141d03;--fcta-muted:#9c9c9c;
  background:var(--fcta-bg);color:#fff;text-align:center;padding:80px 26px 30px;border-radius:38px 38px 0 0;line-height:normal}
.fcta,.fcta *{box-sizing:border-box}
.fcta h2,.fcta p,.fcta ul{margin:0;padding:0}
.fcta a{text-decoration:none}
.fcta a:focus-visible{outline:2px solid var(--fcta-accent);outline-offset:3px}
.fcta h2{font-size:clamp(2rem,6vw,3.4rem);font-weight:700;letter-spacing:-.04em;line-height:1.1;max-width:18ch;margin:0 auto 18px}
.fcta h2 em{font-style:normal;color:var(--fcta-accent)}
.fcta .lead{color:var(--fcta-muted);max-width:44ch;margin:0 auto 30px;font-size:.95rem;line-height:1.5}
.fcta .go{display:inline-block;background:var(--fcta-accent);color:var(--fcta-on-accent);font-size:1rem;font-weight:800;padding:16px 38px;border-radius:999px;
  transition:transform .15s,box-shadow .15s}
.fcta .go:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(163,230,53,.5)}
.fcta .base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;max-width:1000px;margin:70px auto 0;padding-top:24px;
  border-top:1px solid #2b2b2b;font-size:.8rem;color:#8a8a8a}
.fcta .base ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px}
.fcta .base a{color:#bdbdbd;border-radius:4px}
.fcta .base a:hover{color:#fff}
@media (max-width:639.98px){.fcta{padding:64px 20px 28px;border-radius:28px 28px 0 0}.fcta .base{justify-content:center;margin-top:56px}}
@media (prefers-reduced-motion:reduce){.fcta *{transition:none!important}.fcta .go:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<footer class="fcta text-center">
  <h2>Stop reading. <em>Start shipping.</em></h2>
  <p class="lead">Join 28,000 teams who moved their reporting to Meridian and got their Fridays back.</p>
  <a class="btn" href="#">Start your free trial</a>
  <div class="base d-flex flex-wrap align-items-center justify-content-between">
    <p class="mb-0">© Meridian</p>
    <nav aria-label="Footer"><ul class="nav justify-content-center"><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link" href="#">Docs</a></li><li class="nav-item"><a class="nav-link" href="#">Privacy</a></li><li class="nav-item"><a class="nav-link" href="#">X / Twitter</a></li></ul></nav>
  </div>
</footer>
CSS 
/* A .btn restyled through --bs-btn-* for the call to action, a .nav for the legal row. */
.fcta{--fcta-bg:#141414;--fcta-accent:#a3e635;--fcta-on-accent:#141d03;--fcta-muted:#9c9c9c;
  background:var(--fcta-bg);color:#fff;padding:80px 26px 30px;border-radius:38px 38px 0 0;line-height:normal}
.fcta h2{font-size:clamp(2rem,6vw,3.4rem);font-weight:700;letter-spacing:-.04em;line-height:1.1;max-width:18ch;margin:0 auto 18px}
.fcta h2 em{font-style:normal;color:var(--fcta-accent)}
.fcta .lead{color:var(--fcta-muted);max-width:44ch;margin:0 auto 30px;font-size:.95rem;font-weight:400;line-height:1.5}
.fcta .btn{--bs-btn-padding-x:38px;--bs-btn-padding-y:16px;--bs-btn-font-size:1rem;--bs-btn-font-weight:800;--bs-btn-border-radius:999px;--bs-btn-border-width:0;
  --bs-btn-bg:var(--fcta-accent);--bs-btn-color:var(--fcta-on-accent);--bs-btn-hover-bg:var(--fcta-accent);--bs-btn-hover-color:var(--fcta-on-accent);
  --bs-btn-active-bg:var(--fcta-accent);--bs-btn-active-color:var(--fcta-on-accent);line-height:normal;transition:transform .15s,box-shadow .15s}
.fcta .btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px -12px rgba(163,230,53,.5)}
.fcta .base{gap:12px;max-width:1000px;margin:70px auto 0;padding-top:24px;border-top:1px solid #2b2b2b;font-size:.8rem;color:#8a8a8a}
.fcta .nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0;--bs-nav-link-font-size:.8rem;--bs-nav-link-color:#bdbdbd;--bs-nav-link-hover-color:#fff;gap:8px 20px}
.fcta .nav-link{border-radius:4px}
.fcta a:focus-visible{outline:2px solid var(--fcta-accent);outline-offset:3px;box-shadow:none}
@media (max-width:639.98px){.fcta{padding:64px 20px 28px;border-radius:28px 28px 0 0}.fcta .base{justify-content:center!important;margin-top:56px}}
@media (prefers-reduced-motion:reduce){.fcta *{transition:none!important}.fcta .btn:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<footer class="rounded-t-[28px] bg-[#141414] px-5 pt-16 pb-7 text-center leading-[normal] text-white sm:rounded-t-[38px] sm:px-[26px] sm:pt-20 sm:pb-[30px] [&_a:focus-visible]:outline-2 [&_a:focus-visible]:outline-offset-[3px] [&_a:focus-visible]:outline-[#a3e635]">
  <h2 class="mx-auto mb-[18px] max-w-[18ch] text-[clamp(2rem,6vw,3.4rem)] leading-[1.1] font-bold tracking-[-.04em]">Stop reading. <em class="text-[#a3e635] not-italic">Start shipping.</em></h2>
  <p class="mx-auto mb-[30px] max-w-[44ch] text-[.95rem] leading-normal text-[#9c9c9c]">Join 28,000 teams who moved their reporting to Meridian and got their Fridays back.</p>
  <a class="inline-block rounded-full bg-[#a3e635] px-[38px] py-4 text-[1rem] leading-[normal] font-extrabold text-[#141d03] transition duration-150 hover:-translate-y-[3px] hover:shadow-[0_18px_40px_-12px_rgba(163,230,53,.5)] motion-reduce:transition-none motion-reduce:hover:translate-y-0" href="#">Start your free trial</a>
  <div class="mx-auto mt-14 flex max-w-[1000px] flex-wrap items-center justify-center gap-3 border-t border-[#2b2b2b] pt-6 text-[.8rem] text-[#8a8a8a] sm:mt-[70px] sm:justify-between">
    <p>© Meridian</p>
    <nav aria-label="Footer"><ul class="flex flex-wrap justify-center gap-x-5 gap-y-2 [&_a]:rounded [&_a]:text-[#bdbdbd] [&_a:hover]:text-white"><li><a href="#">Pricing</a></li><li><a href="#">Docs</a></li><li><a href="#">Privacy</a></li><li><a href="#">X / Twitter</a></li></ul></nav>
  </div>
</footer>

About this set

A conversion footer that ends the page with one last push. A dark panel with a rounded top holds a huge two-tone headline, Stop reading. Start shipping., a short supporting line, and a single lime pill button for the free trial. Below a thin divider, a slim row carries the copyright and four links. The headline scales fluidly with clamp() from 2rem on phones to 3.4rem on wide screens, so it stays big without breaking lines awkwardly, and the rounded corners shrink a little below 640px. On hover the button lifts and gains a soft lime glow; both effects are removed when the visitor prefers reduced motion. The accent is a single colour, so switching the lime to your brand colour changes the headline highlight, the button and the focus ring together. Use it at the bottom of landing pages, pricing pages and product tours where the footer should do more than list links. The Bootstrap version restyles a .btn through the –bs-btn-* variables and uses a .nav for the legal row.

What’s included

  • Fluid clamp() headline with a highlighted second phrase
  • Single pill call-to-action button with hover lift and glow
  • Rounded top corners that separate the footer from the page
  • Slim legal row with a labelled nav
  • One accent colour for highlight, button and focus ring

Accessibility

The headline is an h2 and the links sit in a nav labelled Footer. The button and links show a 2px lime focus outline with an offset. Grey text on the dark panel is #9c9c9c and #8a8a8a, both above 4.5:1, and the hover lift and glow are removed under prefers-reduced-motion.

Customise it

Change --fcta-accent, --fcta-on-accent and --fcta-bg on .fcta in the plain CSS and Bootstrap versions; the Bootstrap button also reads --bs-btn-bg and --bs-btn-color. In Tailwind swap #a3e635 and #141414 in the utility classes.