# Liquid Glass Button

> Frosted-glass button with backdrop blur, translucent fill, hairline border and a glowing top highlight.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/liquid-glass-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/liquid-glass-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/liquid-glass-button-demo.tsx"
import { Play } from "lucide-react"

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

export default function LiquidGlassButtonDemo() {
  return (
    <div className="relative flex flex-wrap items-center justify-center gap-4 overflow-hidden rounded-2xl bg-gradient-to-br from-indigo-600 via-fuchsia-600 to-orange-500 p-12">
      <span aria-hidden className="absolute -left-10 top-4 size-40 rounded-full bg-cyan-300/50 blur-3xl" />
      <span aria-hidden className="absolute -right-6 bottom-0 size-44 rounded-full bg-yellow-300/40 blur-3xl" />
      <LiquidGlassButton>
        <Play className="size-4" /> Watch demo
      </LiquidGlassButton>
      <LiquidGlassButton glow={false}>No glow</LiquidGlassButton>
    </div>
  )
}
```

## Source

```tsx title="components/liquid-glass-button.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface LiquidGlassButtonProps extends React.ComponentProps<"button"> {
  /** Show the glowing highlight along the top edge */
  glow?: boolean
}

export function LiquidGlassButton({ glow = true, className, children, ...props }: LiquidGlassButtonProps) {
  return (
    <button
      className={cn(
        "group relative inline-flex h-11 items-center justify-center overflow-hidden rounded-full border border-white/10 bg-white/5 px-7 text-sm font-medium text-white backdrop-blur-xl",
        "shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),0_8px_32px_rgba(0,0,0,0.25)]",
        "transition-all duration-300 hover:border-white/20 hover:bg-white/10 active:scale-[0.97]",
        "focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      {glow && (
        <span
          aria-hidden
          className="pointer-events-none absolute inset-x-6 top-0 h-px bg-gradient-to-r from-transparent via-white/80 to-transparent transition-opacity duration-300 group-hover:via-white"
        />
      )}
      {glow && (
        <span
          aria-hidden
          className="pointer-events-none absolute inset-x-4 -top-3 h-6 rounded-full bg-white/30 opacity-60 blur-xl transition-opacity duration-300 group-hover:opacity-100"
        />
      )}
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-gradient-to-b from-white/10 to-transparent opacity-60"
      />
      <span className="relative inline-flex items-center gap-2">{children}</span>
    </button>
  )
}
```