Forms
Button
square, mono, uppercase. five tones, three sizes, plus shapes, hover motion and buttons that keep state.
print.meowda.xyz
Examples
Default
<button class="btn" type="button">Back</button>Primary
<button class="btn primary" type="button">Ask for approval</button>Ok
the positive decision.
<button class="btn ok" type="button">Approve</button>Danger
<button class="btn danger" type="button">Deny</button>Ghost
<button class="btn ghost" type="button">Skip</button>Sizes
<button class="btn primary sm" type="button">Small</button>
<button class="btn primary" type="button">Default</button>
<button class="btn primary lg" type="button">Large</button>Disabled
<button class="btn primary" type="button" disabled>Sending</button>Block
fills its container, the way the phone screens use it.
<a class="btn primary block lg" href="#">Continue with GitHub</a>Decision pair
deny takes a third of the row, approve takes two thirds.
<div class="decide">
<button class="btn danger lg" type="button">Deny</button>
<button class="btn ok lg" type="button">Approve</button>
</div>Icon button
<button class="icon-btn" type="button" aria-label="Dismiss">✕</button>Tonal
soft fill for a secondary action.
<button class="btn tonal" type="button">Save draft</button>Notched
cut corners that grow, with a shine sweep.
<button class="btn fx-notch" type="button">Launch</button>Bracket
open corners that grow and stretch past the edge.
<button class="btn fx-bracket" type="button">Open file</button>Underline
link weight. the amber line draws across.
<button class="btn fx-under" type="button">Read the docs</button>Arrow cap
the icon slot fills and keeps nudging.
<button class="btn fx-arrow" type="button">Next step <i>→</i></button>Tag
pointed end, the marker spins.
<button class="btn fx-tag" type="button">Label</button>Icon only
<button class="btn sq" type="button" aria-label="Add">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 5v14M5 12h14" />
</svg>
</button>Fill sweep
<button class="btn fx-sweep" type="button">Deploy</button>Glow
<button class="btn fx-glow" type="button">Go live</button>Scanline
<button class="btn fx-scan" type="button">Scan</button>Text swap
repeat the label in two spans.
<button class="btn fx-swap" type="button">
<span>Download</span>
<span>Download</span>
</button>Live LED
a pulsing square says the thing is connected.
<button class="btn fx-led" type="button">Connected</button>Progress
loading, then done.
<button class="btn fx-load" type="button">
<span class="fx-fill"></span>
<span class="t">Upload file</span>
</button>Hold to confirm
press and hold for 1.2 seconds.
<button class="btn fx-hold" type="button">
<span class="fx-fill"></span>
<span class="t">Hold to delete</span>
</button>Stepper
digits roll up or down like a counter.
<div class="fx-stepper">
<button type="button" data-step="-1" aria-label="Decrease">−</button>
<output aria-live="polite">2</output>
<button type="button" data-step="1" aria-label="Increase">+</button>
</div>Segmented
a thumb springs to the chosen option.
<div class="fx-seg" role="group">
<span class="thumb"></span>
<span class="tick"></span>
<button type="button" aria-pressed="true">Day</button>
<button type="button" aria-pressed="false">Week</button>
<button type="button" aria-pressed="false">Month</button>
</div>Classes
| Class | What it does |
|---|---|
.btn | base button, 48px tall, 1px border |
.btn.primary | accent fill |
.btn.ok | green fill |
.btn.danger | red text and border |
.btn.ghost | no border, muted text |
.btn.sm / .lg | 40px and 56px tall |
.btn.block | full width |
.btn-row | wrapping row of buttons |
.decide | deny and approve pair |
.icon-btn | bare 40px square icon button |
.btn.tonal | accent text on a soft accent fill |
.btn.fx-notch | clip-path corners, animated by --fx-c |
.btn.fx-bracket | two bracket pseudo elements |
.btn.fx-under | borderless with a drawn underline |
.btn.fx-arrow | put an i with the arrow inside |
.btn.fx-tag | pointed left edge |
.btn.sq | 48px square, for an svg |
.btn.fx-sweep | amber fill slides in |
.btn.fx-glow | amber halo |
.btn.fx-scan | a line sweeps while hovered |
.btn.fx-swap | label rolls up, needs two spans |
.btn.fx-led | pulsing green square |
.btn.fx-load | needs .fx-fill and .t inside |
.btn.fx-hold | needs .fx-fill and .t inside |
.fx-stepper | two buttons with data-step and an output |
.fx-seg | needs .thumb and .tick, buttons use aria-pressed |