# Liquid Metal Button

> Layered gradients imitate flowing liquid metal; a blurred halo spreads on hover.

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

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/liquid-metal-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-metal-button-demo.tsx"
import { Sparkles } from "lucide-react"

import { LiquidMetalButton } from "@/components/liquid-metal-button"

export default function LiquidMetalButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 rounded-2xl bg-zinc-950 p-12">
      <LiquidMetalButton>Liquid metal</LiquidMetalButton>
      <LiquidMetalButton glowColor="#f97316">
        <Sparkles className="size-4" /> Ember glow
      </LiquidMetalButton>
      <LiquidMetalButton disabled>Disabled</LiquidMetalButton>
    </div>
  )
}
```

## Source

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

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

const css = `@keyframes liquid-metal-flow{from{background-position:0 0,0 0,0 0}to{background-position:0 0,0 0,320px 0}}@media (prefers-reduced-motion:reduce){.liquid-metal-surface{animation:none!important}}`

const surface = [
  "radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,0.5) 0%, transparent 45%)",
  "radial-gradient(90% 120% at 90% 110%, rgba(255,255,255,0.22) 0%, transparent 55%)",
  "linear-gradient(115deg, #18181b 0%, #52525b 22%, #d4d4d8 38%, #3f3f46 52%, #18181b 70%, #71717a 88%, #18181b 100%)",
].join(", ")

export interface LiquidMetalButtonProps extends React.ComponentProps<"button"> {
  /** Color of the halo that spreads on hover */
  glowColor?: string
}

export function LiquidMetalButton({ glowColor = "#a1a1aa", className, children, ...props }: LiquidMetalButtonProps) {
  return (
    <>
      <style href="liquid-metal-button" precedence="default">
        {css}
      </style>
      <button
        className={cn(
          "group relative isolate inline-flex h-12 items-center justify-center rounded-full px-8 text-sm font-semibold text-zinc-50",
          "transition-transform duration-200 active:scale-[0.97]",
          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
          "disabled:pointer-events-none disabled:opacity-50",
          className
        )}
        {...props}
      >
        <span
          aria-hidden
          className="pointer-events-none absolute -inset-1 -z-10 rounded-full opacity-25 blur-xl transition-all duration-500 group-hover:-inset-2 group-hover:opacity-80"
          style={{ background: glowColor }}
        />
        <span
          aria-hidden
          className="liquid-metal-surface pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-full shadow-[inset_0_1px_0_rgba(255,255,255,0.45),inset_0_-2px_6px_rgba(0,0,0,0.7),0_0_0_1px_rgba(0,0,0,0.8)]"
          style={{
            backgroundImage: surface,
            backgroundSize: "100% 100%, 100% 100%, 320px 100%",
            backgroundRepeat: "no-repeat, no-repeat, repeat-x",
            animation: "liquid-metal-flow 6s linear infinite",
          }}
        />
        <span className="relative inline-flex items-center gap-2 [text-shadow:0_1px_2px_rgba(0,0,0,0.7)]">{children}</span>
      </button>
    </>
  )
}
```