Button

Buttons with a scan-fill hover effect and glow physics. Use .btn with a variant modifier: 4 variants, 3 sizes, icon mode.

Variants

HTML 
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-danger">Danger</button>

Sizes

HTML 
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>

<!-- Icon-only — square clip-path, provide aria-label -->
<button class="btn btn-primary btn-icon" aria-label="Add">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2.5">
    <path d="M12 5v14M5 12h14"/>
  </svg>
</button>

Shapes

HTML 
<button class="btn btn-primary btn-cut">Cut</button>
<button class="btn btn-primary btn-bevel">Bevel</button>
<button class="btn btn-primary btn-round">Round</button>
<button class="btn btn-primary btn-square">Square</button>

States

HTML 
<!-- Native disabled — removes from tab order -->
<button class="btn btn-primary" disabled>Disabled (native)</button>

<!-- aria-disabled — stays in tab order, announces state to screen readers -->
<button class="btn btn-primary" aria-disabled="true" tabindex="-1">Disabled (aria)</button>

<button class="btn btn-secondary" disabled>Secondary off</button>

CSS Variable API

Variable Default Description
--btn-bgrgba(255,255,255,0.04)Background (solid, gradient, or multi-layer)
--btn-colorrgba(240,235,224,0.55)Text colour
--btn-filternoneResting drop-shadow / glow
--btn-scan-colorrgba(255,255,255,0.07)Scan-fill accent colour
--btn-hover-bgfalls back to --btn-bgHover background
--btn-hover-colorrgba(240,235,224,0.90)Hover text colour
--btn-hover-filternoneHover glow + brightness
--btn-hover-text-shadownoneHover text luminescence
--btn-active-filternoneActive-press filter
--btn-interiortransparentInner fill for outlined variants
--btn-inner-clipnoneInner polygon for outlined variants (size classes set automatically)
--btn-icon-sizeround(calc(1lh + 1.3rem), 1px)Square side of a .btn-icon — one line box plus the size's vertical padding, so it matches the text button beside it (size classes set it automatically)

Custom Variant

Override only the variables you need. The plasma example below creates a purple neon button.

CSS 
.btn-plasma {
  --btn-bg:                rgba(139, 0, 255, 0.38);
  --btn-color:             #BF5FFF;
  --btn-filter:            drop-shadow(0 0 8px rgba(139,0,255,0.45));
  --btn-scan-color:        rgba(139, 0, 255, 0.18);
  --btn-hover-filter:      drop-shadow(0 0 22px rgba(139,0,255,1)) brightness(1.10);
  --btn-hover-text-shadow: 0 0 16px rgba(200,100,255,0.7);
}

When to Use

Use buttons for actions that trigger an immediate operation: submitting a form, opening a dialog, or running a command. Don't use them for navigation between pages.

✓ Do
  • Use .btn-primary for the single most important action in a view
  • Pair with .btn-ghost or .btn-secondary for secondary/cancel actions
  • Use .btn-icon when space is tight and the action is universally understood
  • Keep labels short: 1–3 words, active voice (Save, Delete, Confirm)
  • Use .btn-lg for touch targets on mobile or hero CTAs
✗ Don't
  • Don't place more than one .btn-primary in the same visual region
  • Don't use for navigation. Use <a> tags for links.
  • Don't use vague labels like "Click here" or "Submit"
  • Don't disable without explaining why (use aria-describedby or a tooltip)
  • Don't use .btn-danger for anything other than destructive, irreversible actions