Button

Use .glass-button when you need button styling on a non-<button> element, like an <a> tag.

Preview

Usage

<a href="/signup" class="glass-button">Link Button</a>
<span class="glass-button">Span Button</span>

States

The .glass-button class includes the same hover shimmer, active scale, and disabled styling as the semantic <button>:

<button class="glass-button">Hover me</button>
<button class="glass-button" disabled>Disabled</button>

CSS Properties

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
Hover	Shimmer sweep + brighter background + deeper shadow
Active	scale(0.98) + darker background
Disabled	opacity: 0.45, no pointer events
Extra	text-decoration: none (useful for <a> tags)

Compatible Modifiers

• .thin — lighter glass effect
• .thick — more opaque, heavier frost
• .vibrant — accent-tinted button (blue by default)
• .vibrant.success — green tinted
• .vibrant.warning — orange tinted
• .vibrant.error — red tinted
• .glow — outer accent glow

<button class="glass-button vibrant">Vibrant</button>
<button class="glass-button vibrant success">Success</button>
<button class="glass-button vibrant warning">Warning</button>
<button class="glass-button vibrant error">Error</button>
<button class="glass-button glow">Glow</button>