Liquid Button

Glass-style and metal-style buttons: SVG displacement filter, layered shadows, and theme-aware gradients. Complete Initialization first, then add via CLI or copy the component and CSS from this repository.

Preview

Live

Add Liquid Button via CLI

After init and layout theme wiring, run:

npm exec -- my-ui add liquid-button

Re-export LiquidButton and MetalButton from components/ui/index.ts if you use barrel imports (same as other my-ui add components).

Setup note

Manual copy is still supported if you are not using the CLI:

Preferred: run `npm exec -- my-ui add liquid-button` — copies `components/ui/liquid-glass-button.tsx` and appends Liquid/Metal (and demo layout) CSS to `styles/globals.css` when those classes are not already present. Alternatively, copy the component and merge the `.ui-liquid-btn` / `.ui-metal-btn` rules from `styles/globals.css` in this repo.

Usage

import { LiquidButton, MetalButton } from "@/components/ui/liquid-glass-button";

export function GlassDemo() {
  return (
    <section>
      <div
        className="ui-demo-liquid"
        style={{
          backgroundImage:
            "url(https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&q=80)",
        }}
      >
        <LiquidButton className="ui-demo-liquid__btn" size="xxl">
          Liquid Glass
        </LiquidButton>
      </div>
      <MetalButton variant="primary">Metal</MetalButton>
    </section>
  );
}