Shadcn.io is not affiliated with official shadcn/ui
Glass Button
Translucent button with backdrop-blur for frosted-glass aesthetic over rich backgrounds in React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Glass Button preview
Frosted glass, the right way. A translucent surface with a backdrop-blur lets whatever's behind it bleed through softly — like looking through a foggy window. The border is a low-alpha contrast line so the edge stays defined. Perfect for buttons sitting over hero images, gradients, or video backgrounds where a solid bg would fight the imagery. Place it on a flat page background and the effect disappears (the blur has nothing to blur) — glass needs something to filter. Built on top of the shadcn Button so every variant and size you already use just works.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the glass-button button into my projectRelated Components
Pill Button
Pill with inset highlight
Shine Button
Diagonal light sweep
Shimmer Button
Animated shimmer ring
Spotlight Button
Cursor-following light
Gradient Button
Shifting gradient bg
Neon Button
Glowing neon halo
FAQ
Was this page helpful?
Sign in to leave feedback.
GitHub Stars Button
GitHub stars button with live star count and animated sliding number display for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Glow Border Button
Animated gradient glow border button with rotating light effect for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.