Skip to content
hs108 docs

Buttons

Base class

All buttons share .btn as a base class. Add a modifier to set the visual style.

.btn {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 0;
  padding: 13px 26px;
}

Variants

Primary

The main call-to-action. Blue fill, darkens on hover.

btn--primary 
<button class="btn btn--primary">Explore Archive</button>

Outline

Bordered, transparent background. Fills blue on hover.

btn--outline 
<button class="btn btn--outline">View Journal</button>

Ghost

No border, no fill. Text only — colour shifts to blue on hover. For low-priority actions.

btn--ghost 
<button class="btn btn--ghost">Read more →</button>

Action

Vermilion fill. For primary CTAs, confirmations, and download triggers.

btn--action 
<button class="btn btn--action">Download PDF</button>

Small

A .btn--sm modifier reduces padding and font size. Combine with any style variant.

btn--sm (combined with --outline) 
<button class="btn btn--outline btn--sm">Filter</button>
<button class="btn btn--primary btn--sm">Apply</button>

All variants together

All button variants 
<button class="btn btn--primary">Primary</button>
<button class="btn btn--outline">Outline</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--action">Action</button>
<button class="btn btn--outline btn--sm">Small</button>

As anchor tags

Buttons can be <a> elements — the class applies identically:

btn on anchor
Go to docs View source
<a href="#" class="btn btn--primary">Go to docs</a>
<a href="#" class="btn btn--outline">View source</a>

Usage rules

  • One primary button per view. Don’t stack multiple .btn--primary elements.
  • Action (vermilion) is intentional. Reserve for irreversible or significant actions.
  • Ghost buttons need context. Use only when the surrounding layout makes the action obvious.
  • Uppercase is mandatory. Never override text-transform: uppercase on .btn.
  • No icon-only buttons. If using an icon, always include a visible label.