Buttons
How button elements are automatically styled with glassmorphism, shimmer effects, and interaction states.
The <button> element (and input[type="submit"], input[type="reset"]) is automatically styled as a glassmorphic button with rich interaction states. No classes required.
Basic Usage
<button>Default Button</button>
<button disabled>Disabled</button>Interaction States
Every button goes through 4 visual states:
| State | Behavior |
|---|---|
| Default | Frosted glass with thin blur, specular top-edge glare |
| Hover | Specular shimmer sweeps across, background brightens, shadow deepens |
| Active | Button scales down to scale(0.98), background darkens |
| Disabled | Opacity drops to 0.45, cursor becomes not-allowed, no pointer events |
The hover shimmer is a linear-gradient that slides from left to right using background-position, creating a light-refraction effect.
CSS Details
| Property | Value |
|---|---|
| Background | rgba(255, 255, 255, 0.2) with blur(8px) |
| Border | 1px solid var(--glass-border) |
| Border Radius | var(--glass-radius-md) (14px) |
| Padding | 0.6rem 1.25rem |
| Font | Inherited, 0.95rem, weight 600 |
| Layout | inline-flex, centered, gap: 0.5rem |
| Depth | Specular glare + ambient shadow |
| Shimmer | 200% wide gradient that transitions on hover |
With Icons
Buttons support inline icons thanks to flexbox and gap:
<button>⬇ Download</button>
<button>Send →</button>Utility Class Alternative
For <a> tags or other elements, use .glass-button:
<a href="/signup" class="glass-button">Sign Up</a>See the Button component page for full details on .glass-button.