Button

Load button.css to access four ready-to-use button patterns. Each can be customized through CSS variables. No JavaScript required.

Default button - no class applied

<button>a button</button>
<button disabled>a disabled button</button>

Variables

Colors are controlled by the theme variables:

Call-to-action

Use .cta-button for the single primary action on a page or panel. It renders with a solid background, small-caps uppercase label and a drop shadow. Works on both <button> and <a> elements.

<button class="cta-button">Get started</button>
<a class="cta-button" href="...">Download</a>
<button class="cta-button" disabled>Unavailable</button>

Text-reveal

.text-reveal-button shows only an icon at rest. On hover or keyboard focus, the text label appears beside it and the button expands to fit.

Accessibility. The native <button> element is keyboard-focusable (Tab) and activatable with Enter or Space — no JavaScript required. The SVG icon must carry aria-hidden="true" since it is decorative. The <span> label then provides the button's accessible name, read by screen readers. The :focus state triggers the same visual expansion as hover, giving keyboard users the same feedback as pointer users.

<button class="text-reveal-button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"
         fill="none" stroke="currentColor" stroke-width="2"
         width="100%" height="100%" aria-hidden="true">
        <!-- icon paths -->
    </svg>
    <span>Label</span>
</button>

Size is controlled by --text-reveal-height and --text-reveal-width (both default to calc(var(--font-size) * 1.6)). Do not combine with .cta-button or .action-button — their padding conflicts with the fixed-width layout.

<button class="text-reveal-button"
        style="--text-reveal-height: calc(var(--font-size) * 3);
               --text-reveal-width:  calc(var(--font-size) * 3);">
    <svg ... width="100%" height="100%" aria-hidden="true">
        <!-- icon paths -->
    </svg>
    <span>Label</span>
</button>

Gradient buttons

.action-button combines an icon and a text label on a horizontal gradient background. .apply-button is its text-only counterpart, slightly shorter. Both share the same gradient that reverses on hover.

Change contrast Change color

<button class="action-button">
    <img src="icon.png" alt="">
    <span>Label</span>
</button>

<button class="apply-button">Apply</button>
<button class="apply-button">Cancel</button>

Height: --action-height (default calc(var(--font-size) * 2.8)) and --apply-height (default calc(var(--font-size) * 2.1)).

Toggle group

Load togglegroup.css and add .toggle-group to a container of .menuitem labels to render a segmented control for mutually-exclusive choices — the inner borders flatten and overlap so the group reads as one connected control instead of separate pills.

Accessibility. The container carries role="radiogroup" and an aria-label. Each option is a real <input type="radio"> wrapped in its <label> — arrow-key cycling and checked/unchecked announcement come from the native radio semantics, not from JavaScript. The input is visually hidden (not aria-hidden: it stays focusable and meaningful to assistive tech) while the label supplies both the visible control and its accessible name.

<section class="toggle-group" role="radiogroup" aria-label="Text alignment">
    <label class="menuitem" for="align-left">
        <input type="radio" name="align" id="align-left" checked> Left
    </label>
    <label class="menuitem" for="align-center">
        <input type="radio" name="align" id="align-center"> Center
    </label>
    <label class="menuitem" for="align-right">
        <input type="radio" name="align" id="align-right"> Right
    </label>
</section>

The checked item swaps to --buttons-bg-color-hover / --buttons-fg-color; corner rounding uses --border-radius on the first and last items only.