Liquid Glass

A compact glass button (or link) with translucent shading and a softly illuminated hover edge. Pass accent for a subtle brand tint. Pointer lighting and a localized backdrop blur illuminate the active control without distorting its label. Idle controls stay filter-free. Theme-aware, keyboard accessible, and dependency-free.

Preview

Installation

Install the component using the CLI.

terminal

npx shadcn@latest add https://www.nkcbuilds.com/r/liquid-glass-button.json

Usage

Import the component:

import

import { LiquidGlassButton } from "@/components/ui/liquid-glass-button"

Use it in your code:

example.tsx

<LiquidGlassButton>Glass</LiquidGlassButton>
<LiquidGlassButton accent="#61DAFB">React</LiquidGlassButton>
<LiquidGlassButton href="https://github.com">Open</LiquidGlassButton>

Props

Property	Type	Default	Description
`children`	`ReactNode`	`—`	Label, icon, or both.
`accent`	`string`	`—`	Brand color for the hover edge (e.g. #61DAFB). Omit for neutral glass.
`href`	`string`	`—`	When set, renders an <a>. Omit for a <button>.
`className`	`string`	`—`	Extra classes on the control.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Native button type. Ignored when href is set.
`disabled`	`boolean`	`—`	Disables the button. Ignored when href is set.