Landing · Elements

Button

Marketing call-to-action buttons for the AhaSlides landing sites. Three emphasis levels — primary, secondary and tertiary — each shown at all three control sizes (sm 28px / md 36px / lg 40px) with its own paste-and-run snippet. They FOLLOW the product Button contract (aha-button): colour, size, radius, weight and motion all bind to the DS Button tokens, so the marketing site and the product app stay on one brand source. The tertiary is the DS ghost button (transparent, purple label, soft purple hover fill) — the same component Webflow ships as its "Text link"; the live Text link's colour-only hover and hard-border focus are logged in landing/SCAN.md as Webflow-to-update items, because the DS ghost definition wins. A promotional pink accent (aha-btn--pink) stays available as a further variant. On a product surface reuse <aha-button> itself; on a framework-free marketing page paste the anchor form.

◆ generated from landing/button.json — do not edit by hand

Marketing call-to-action buttons for the AhaSlides landing sites — they follow the product Button contract, so the page reads exactly as the live site ships. Choose one emphasis per action: primary for the single most important call-to-action, secondary for everyday actions, and tertiary for low-emphasis or inline choices.

Primary button

The single most important action on a view — at most one per section.

All sizes

Get startedSM · 28pxGet startedMD · 36pxGet startedLG · 40px · default

button--primary.html

<a class="aha-btn aha-btn--primary aha-btn--sm">Get started</a>
<a class="aha-btn aha-btn--primary aha-btn--md">Get started</a>
<a class="aha-btn aha-btn--primary aha-btn--lg">Get started</a>

Secondary button

The default for everyday actions — neutral white with a border.

All sizes

Log inSM · 28pxLog inMD · 36pxLog inLG · 40px · default

button--secondary.html

<a class="aha-btn aha-btn--secondary aha-btn--sm">Log in</a>
<a class="aha-btn aha-btn--secondary aha-btn--md">Log in</a>
<a class="aha-btn aha-btn--secondary aha-btn--lg">Log in</a>

Tertiary button

Low-emphasis or inline choices — no container weight until hovered. Webflow ships this as its "Text link".

All sizes

See pricingSM · 28pxSee pricingMD · 36pxSee pricingLG · 40px · default

button--tertiary.html

<a class="aha-btn aha-btn--tertiary aha-btn--sm">See pricing</a>
<a class="aha-btn aha-btn--tertiary aha-btn--md">See pricing</a>
<a class="aha-btn aha-btn--tertiary aha-btn--lg">See pricing</a>

Paste-and-run HTML

Framework-free — copy the whole block into any page (Webflow, WordPress, a static site). It binds only to the shared --aha-* tokens, so load the token layer once on the page first and the block inherits the AhaSlides brand automatically.

button.html

<style>
.aha-btns{
  font-family:var(--aha-font-product);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--aha-space-12);
}
.aha-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--aha-space-8);
  min-height:var(--aha-control-height-button-lg);
  padding:0 var(--aha-space-20);
  border:1px solid transparent;
  border-radius:var(--aha-radius-default);
  font-family:inherit;
  font-size:var(--aha-size-l);
  font-weight:var(--aha-weight-semibold);
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--aha-motion-mid) var(--aha-ease-in-out),border-color var(--aha-motion-mid) var(--aha-ease-in-out),color var(--aha-motion-mid) var(--aha-ease-in-out),box-shadow var(--aha-motion-mid) var(--aha-ease-in-out),transform var(--aha-motion-fast) var(--aha-ease-out);
}
.aha-btn:active{transform:translateY(1px)}
.aha-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--aha-button-focus-ring,rgba(211,180,255,.3))}
.aha-btn--sm{min-height:var(--aha-control-height-button-sm);padding:0 var(--aha-space-8);border-radius:var(--aha-radius-xs);font-size:var(--aha-size-default)}
.aha-btn--md{min-height:var(--aha-control-height-button-md);padding:0 var(--aha-space-16);border-radius:var(--aha-radius-default);font-size:var(--aha-size-default)}
.aha-btn--lg{min-height:var(--aha-control-height-button-lg);padding:0 var(--aha-space-20);border-radius:var(--aha-radius-default);font-size:var(--aha-size-l)}
.aha-btn--primary{
  background:var(--aha-button-primary-bg);
  color:var(--aha-button-primary-text);
  box-shadow:var(--aha-button-elevate-primary);
}
.aha-btn--primary:hover{background:var(--aha-button-primary-bg-hover)}
.aha-btn--primary:active{background:var(--aha-button-primary-bg-press)}
.aha-btn--secondary{
  background:var(--aha-button-default-bg);
  color:var(--aha-button-default-text);
  border-color:var(--aha-button-default-border);
  box-shadow:var(--aha-button-elevate-secondary);
}
.aha-btn--secondary:hover{background:var(--aha-button-default-bg-hover);border-color:var(--aha-button-default-border-hover);color:var(--aha-color-primary)}
.aha-btn--secondary:active{border-color:var(--aha-button-default-border-press)}
.aha-btn--tertiary{background:transparent;color:var(--aha-color-primary)}
.aha-btn--tertiary:hover{background:var(--aha-button-ghost-bg-hover);color:var(--aha-purple-50)}
.aha-btn--tertiary:active{background:var(--aha-button-ghost-bg-press);color:var(--aha-color-primary)}
.aha-btn--pink{background:var(--aha-pink-60);color:var(--aha-white)}
.aha-btn--pink:hover{background:var(--aha-pink-50)}
</style>
<div class="aha-btns">
  <a class="aha-btn aha-btn--primary" href="#primary">Primary</a>
  <a class="aha-btn aha-btn--secondary" href="#secondary">Secondary</a>
  <a class="aha-btn aha-btn--tertiary" href="#tertiary">Tertiary</a>
</div>

Load the tokens once

Add this to your page <head> before the block — it defines every --aha-* custom property the block reads:

head

<link rel="stylesheet" href="https://ahaslides-product.github.io/ahaslides-design/variables.css">