Glass Button

A true frosted-glass button — backdrop-blur over a translucent surface with an inset highlight — for buttons that sit on top of imagery or color.

Buttonsbuttonglassbackdrop-blur

Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.

Dependencies: lucide-react

Overview

Shape

Pill — rounded-full, h-9, px-5

Glass

backdrop-blur-md + bg-background/40

Highlight

ring-1 ring-inset ring-foreground/10

Motion

150ms surface + shadow fade on hover