CTA

Call-to-action.

html

<button type="button" class="btn-cta btn-cta--solid" style="--bg:#241430;border-radius:999px">
  Get started
  <span class="btn-cta__arrow"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 12h16M13 5l7 7-7 7"/></svg></span>
</button>
<style>
.btn-cta {
  font: 700 16px/1 system-ui, sans-serif;
  padding: 15px 26px;
  border: 2px solid var(--bg);
  background: var(--bg);
  color: #FAF7F2;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
}
@media (prefers-reduced-motion: no-preference) {
.btn-cta { transition: transform .15s ease; }
}
.btn-cta--outline { background: transparent; color: var(--bg); }
.btn-cta:hover { transform: translateY(-1px); }
.btn-cta:active { transform: translateY(0); }
.btn-cta:focus-visible { outline:2px solid #241430;outline-offset:2px; }
.btn-cta__arrow { display: inline-flex; }
</style>

tailwind

<button type="button" class="inline-flex items-center gap-2.5 px-6.5 py-4 text-base font-bold border-2 cursor-pointer motion-safe:transition-transform hover:-translate-y-0.5 active:translate-y-0 btn-cta-tw btn-cta-tw--solid" style="border-color:#241430;border-radius:999px">
  Get started
  <span class="inline-flex"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 12h16M13 5l7 7-7 7"/></svg></span>
</button>
<style>
.btn-cta-tw--solid { background: #241430; color: #FAF7F2; }
.btn-cta-tw--outline { background: transparent; color: #241430; }
.btn-cta-tw--solid:focus-visible { outline:2px solid #241430;outline-offset:2px; }
</style>

react

export function CtaButton({
  label = "Get started",
  style = "solid",
  bg = "#241430",
  radius = 999,
  showArrow = true,
}) {
  const solid = style === "solid";
  return (
    <button
      type="button"
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 10,
        padding: "15px 26px",
        borderRadius: radius,
        border: `2px solid ${bg}`,
        background: solid ? bg : "transparent",
        color: solid ? "#FAF7F2" : bg,
        font: "700 16px/1 system-ui, sans-serif",
        cursor: "pointer",
      }}
    >
      {label}
      {showArrow && (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M4 12h16M13 5l7 7-7 7" />
        </svg>
      )}
    </button>
  );
}