Metal Button

Shaders 123

About

A pill-shaped button framed by a real-time WebGL liquid-metal ring, with chromatic, silver and gold color presets.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Metal Button to your project and fits it to your theme.

Code

How Metal Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { MetalButton } from "@/components/ui/metal-button";
import { ArrowUpRight, Sparkles } from "lucide-react";

export default function MetalButtonDemo() {
  return (
    <div className="flex w-full flex-col items-center gap-6 py-10">
      <div className="flex flex-wrap items-center justify-center gap-5">
        <MetalButton preset="chromatic">
          <Sparkles className="size-4" />
          Upgrade to Pro
        </MetalButton>
        <MetalButton preset="silver">Continue</MetalButton>
        <MetalButton preset="gold" size="lg">
          Get started
          <ArrowUpRight className="size-4" />
        </MetalButton>
      </div>
      <p className="text-sm text-neutral-500 dark:text-neutral-400">
        One shared WebGL shader paints every ring - chromatic, silver and gold
        presets.
      </p>
    </div>
  );
}