Open demo

CSS code

HTML 
<div class="cta-stack">
  <button class="cta cta-pri" type="button" aria-describedby="cta-trial-note">Start your free trial</button>
  <small id="cta-trial-note">No card required · Cancel any time</small>
</div>

<div class="cta-pair">
  <button class="cta cta-pri" type="button">Get started free</button>
  <button class="cta cta-sec" type="button">Book a demo</button>
</div>

<div class="cta-pair">
  <button class="cta cta-offer" type="button">Upgrade to Pro <span>−40%</span></button>
  <button class="cta cta-glow" type="button">Claim your seat</button>
</div>
CSS 
/* Marketing calls to action: a lifted primary, an outlined secondary, a button with an offer badge and a
   gradient button that glows on hover. The reassurance line is tied to its button with aria-describedby. */
.cta-stack{display:flex;flex-direction:column;align-items:center;gap:10px}
.cta-stack small{font-size:.79rem;color:#667085}
.cta-pair{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.cta{border:0;border-radius:13px;padding:16px 34px;font:inherit;font-size:1rem;font-weight:700;line-height:normal;
  cursor:pointer;transition:transform .14s,box-shadow .2s,background-color .18s}
.cta:focus-visible{outline:2px solid #4f46e5;outline-offset:3px}
.cta-pri{background:#4f46e5;color:#fff;box-shadow:0 10px 26px -12px rgba(79,70,229,.85)}
.cta-pri:hover{background:#4338ca;transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(79,70,229,.9)}
.cta-sec{background:#fff;color:#344054;box-shadow:inset 0 0 0 1.5px #838b9b}
.cta-sec:hover{background:#fafbfd;transform:translateY(-2px)}
.cta-offer{display:inline-flex;align-items:center;gap:11px;background:#101828;color:#fff}
.cta-offer span{background:#22c55e;color:#052e16;font-size:.72rem;font-weight:800;letter-spacing:.04em;
  padding:3px 9px;border-radius:999px;text-transform:uppercase}
.cta-offer:hover{background:#344054;transform:translateY(-2px)}
.cta-glow{background:linear-gradient(120deg,#7c3aed,#db2777);color:#fff;box-shadow:0 0 0 0 rgba(219,39,119,.45)}
.cta-glow:hover{transform:translateY(-2px);box-shadow:0 0 38px -6px rgba(219,39,119,.7)}
.cta:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.cta{transition:none}.cta:hover{transform:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="cta-stack d-flex flex-column align-items-center">
  <button class="btn cta cta-pri" type="button" aria-describedby="cta-trial-note">Start your free trial</button>
  <small id="cta-trial-note">No card required · Cancel any time</small>
</div>

<div class="cta-pair d-flex flex-wrap justify-content-center">
  <button class="btn cta cta-pri" type="button">Get started free</button>
  <button class="btn cta cta-sec" type="button">Book a demo</button>
</div>

<div class="cta-pair d-flex flex-wrap justify-content-center">
  <button class="btn cta cta-offer d-inline-flex align-items-center" type="button">Upgrade to Pro <span class="badge rounded-pill text-uppercase">−40%</span></button>
  <button class="btn cta cta-glow" type="button">Claim your seat</button>
</div>
CSS 
/* Marketing calls to action: .btn restyled through --bs-btn-* variables, a .badge for the offer, and a gradient
   background plus hover lift that Bootstrap has no utility for. */
.cta-stack{gap:10px}
.cta-pair{gap:12px}
.cta-stack small{font-size:.79rem;color:#667085}
.cta{--bs-btn-padding-x:34px;--bs-btn-padding-y:16px;--bs-btn-font-size:1rem;--bs-btn-font-weight:700;
  --bs-btn-line-height:normal;--bs-btn-border-width:0;--bs-btn-border-radius:13px;--bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;
  --bs-btn-focus-box-shadow:0 0 0 3px #f4f5f9,0 0 0 5px #4f46e5;
  transition:transform .14s,box-shadow .2s,background-color .18s}
.cta-pri{--bs-btn-bg:#4f46e5;--bs-btn-hover-bg:#4338ca;--bs-btn-active-bg:#4338ca;box-shadow:0 10px 26px -12px rgba(79,70,229,.85)}
.cta-pri:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(79,70,229,.9)}
.cta-sec{--bs-btn-color:#344054;--bs-btn-bg:#fff;--bs-btn-hover-color:#344054;--bs-btn-hover-bg:#fafbfd;
  --bs-btn-active-color:#344054;--bs-btn-active-bg:#fafbfd;box-shadow:inset 0 0 0 1.5px #838b9b}
.cta-sec:hover{transform:translateY(-2px)}
.cta-sec:focus-visible{box-shadow:inset 0 0 0 1.5px #838b9b,var(--bs-btn-focus-box-shadow)}
.cta-offer{--bs-btn-bg:#101828;--bs-btn-hover-bg:#344054;--bs-btn-active-bg:#344054;gap:11px}
.cta-offer:hover{transform:translateY(-2px)}
.cta-offer .badge{--bs-badge-padding-x:9px;--bs-badge-padding-y:3px;--bs-badge-font-size:.72rem;
  --bs-badge-font-weight:800;--bs-badge-color:#052e16;background:#22c55e;letter-spacing:.04em;line-height:normal}
.cta-glow{--bs-btn-bg:#7c3aed;--bs-btn-hover-bg:#7c3aed;--bs-btn-active-bg:#7c3aed;
  background-image:linear-gradient(120deg,#7c3aed,#db2777);box-shadow:0 0 0 0 rgba(219,39,119,.45)}
.cta-glow:hover{transform:translateY(-2px);box-shadow:0 0 38px -6px rgba(219,39,119,.7)}
.cta:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.cta{transition:none}.cta:hover{transform:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="flex flex-col items-center gap-2.5">
  <button type="button" aria-describedby="cta-trial-note" class="cursor-pointer rounded-[13px] px-[34px] py-4 text-[1rem] font-bold transition-[transform,box-shadow,background-color] duration-200 hover:-translate-y-0.5 active:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#4f46e5] motion-reduce:transition-none motion-reduce:hover:translate-y-0 bg-[#4f46e5] text-white shadow-[0_10px_26px_-12px_rgba(79,70,229,.85)] hover:bg-[#4338ca] hover:shadow-[0_16px_34px_-12px_rgba(79,70,229,.9)]">Start your free trial</button>
  <small id="cta-trial-note" class="text-[.79rem] text-[#667085]">No card required · Cancel any time</small>
</div>

<div class="flex flex-wrap justify-center gap-3">
  <button type="button" class="cursor-pointer rounded-[13px] px-[34px] py-4 text-[1rem] font-bold transition-[transform,box-shadow,background-color] duration-200 hover:-translate-y-0.5 active:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#4f46e5] motion-reduce:transition-none motion-reduce:hover:translate-y-0 bg-[#4f46e5] text-white shadow-[0_10px_26px_-12px_rgba(79,70,229,.85)] hover:bg-[#4338ca] hover:shadow-[0_16px_34px_-12px_rgba(79,70,229,.9)]">Get started free</button>
  <button type="button" class="cursor-pointer rounded-[13px] px-[34px] py-4 text-[1rem] font-bold transition-[transform,box-shadow,background-color] duration-200 hover:-translate-y-0.5 active:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#4f46e5] motion-reduce:transition-none motion-reduce:hover:translate-y-0 bg-white text-[#344054] shadow-[inset_0_0_0_1.5px_#838b9b] hover:bg-[#fafbfd]">Book a demo</button>
</div>

<div class="flex flex-wrap justify-center gap-3">
  <button type="button" class="cursor-pointer rounded-[13px] px-[34px] py-4 text-[1rem] font-bold transition-[transform,box-shadow,background-color] duration-200 hover:-translate-y-0.5 active:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#4f46e5] motion-reduce:transition-none motion-reduce:hover:translate-y-0 inline-flex items-center gap-[11px] bg-[#101828] text-white hover:bg-[#344054]">Upgrade to Pro <span class="rounded-full bg-[#22c55e] px-[9px] py-[3px] text-[.72rem] font-extrabold tracking-[.04em] text-[#052e16] uppercase">−40%</span></button>
  <button type="button" class="cursor-pointer rounded-[13px] px-[34px] py-4 text-[1rem] font-bold transition-[transform,box-shadow,background-color] duration-200 hover:-translate-y-0.5 active:translate-y-0 focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#4f46e5] motion-reduce:transition-none motion-reduce:hover:translate-y-0 bg-linear-[120deg,#7c3aed,#db2777] text-white shadow-[0_0_0_0_rgba(219,39,119,.45)] hover:shadow-[0_0_38px_-6px_rgba(219,39,119,.7)]">Claim your seat</button>
</div>

About this set

Call-to-action buttons for landing and pricing pages, in the combinations they are usually used. The first is a single Start your free trial button with a reassurance line underneath, No card required and Cancel any time, linked to the button with aria-describedby so screen readers read it too. The second pairs a primary Get started free with a secondary outlined Book a demo. The third pairs Upgrade to Pro, a near-black button carrying a green offer badge, with Claim your seat, a violet to pink gradient button that glows on hover. The primary buttons cast an indigo-tinted shadow, and every button lifts two pixels on hover and settles back when pressed. Use one primary per section, put the secondary beside it for visitors who are not ready, and keep the badge and glow styles for a single promotion. The outlined button’s border was darkened so it reaches 3:1 against the page. The Bootstrap version restyles .btn through the –bs-btn-* variables and uses a stock .badge.rounded-pill for the offer, and the Tailwind version uses a bg-linear gradient and hover translate utilities.

What’s included

  • Primary, secondary, offer badge and gradient glow buttons
  • Reassurance line linked with aria-describedby
  • Tinted shadows and a two-pixel hover lift
  • Outline border darkened to 3:1 against the page
  • Lift and transitions off under reduced motion

Accessibility

All buttons are native buttons with visible text, and the reassurance line is attached to its button with aria-describedby. Label contrast is at least 4.6:1, including white on the pink end of the gradient. Keyboard focus draws a 2px indigo outline offset by 3px. Under prefers-reduced-motion the transitions and the hover lift are removed.

Customise it

Change the fills and shadows in .cta-pri, .cta-sec, .cta-offer and .cta-glow, and the badge colours in .cta-offer span. In Bootstrap the fills are --bs-btn-bg and --bs-btn-hover-bg on each class and the badge uses --bs-badge-*; in Tailwind edit the bg-, shadow- and bg-linear- utilities.