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)

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