knot-ui
componentglass-buttonsource: ok · hit
Glass Button
A frosted-glass morphism button with backdrop blur and inset highlights.
npx shadcn add "https://knot-ui.trupal.me/r/glass-button.json"free
Visual style
glass-blur
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Files1 · source cached 10/9/2026, 4:13:49 PM
components/library/glassButton.tsx
export const GlassButton = () => {
return (
<button className="relative w-48 h-16 rounded-lg backdrop-blur-md border border-[rgba(255,255,255,0.3)] shadow-[0_8px_32px_rgba(0,0,0,0.1),inset_0_1px_0_rgba(255,255,255,0.5),inset_0_-1px_0_rgba(255,255,255,0.1)] bg-[rgba(255,255,255,0.05)] flex items-center justify-center text-white font-semibold cursor-pointer overflow-hidden transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 hover:shadow-[0_12px_48px_rgba(0,0,0,0.2),inset_0_1px_0_rgba(255,255,255,0.5),inset_0_-1px_0_rgba(255,255,255,0.1)]">
{/* <div className="absolute inset-0 bg-linear-to-b from-white/30 to-transparent opacity-40 pointer-events-none" /> */}
<span className="relative z-10">
Glass Button looks
</span>
</button>
)
}