Logo

Liquid Glass

Components/Glass Button

Glass Button

A glassmorphism button with reflex lighting and hover/active scale effects.

Frost
Slate
Berry
GlassButton.tsx
<!-- Slate Glass Button -->
<button class="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-2xl text-sm font-semibold text-[#e1e1e1] bg-[#bbbbbc29] backdrop-blur-[10px] backdrop-saturate-150 cursor-pointer transition-all duration-200 hover:scale-[1.03] active:scale-[0.97] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.12),inset_1.8px_3px_0_-2px_rgba(255,255,255,0.26),inset_-2px_-2px_0_-2px_rgba(255,255,255,0.24),inset_-3px_-8px_1px_-6px_rgba(255,255,255,0.18),inset_-0.3px_-1px_4px_0_rgba(0,0,0,0.24),inset_-1.5px_2.5px_0_-2px_rgba(0,0,0,0.4),inset_0px_3px_4px_-2px_rgba(0,0,0,0.4),inset_2px_-6.5px_1px_-4px_rgba(0,0,0,0.2),0px_1px_5px_0px_rgba(0,0,0,0.2),0px_6px_16px_0px_rgba(0,0,0,0.16)]">
  Click Me
</button>