# Anti Metal Button

> Industrial metal button with a dark-gray gradient, stacked inner borders and brushed grain.

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

## Install

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

import { AntiMetalButton } from "@/components/anti-metal-button"

export default function AntiMetalButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 rounded-2xl bg-zinc-900 p-10">
      <AntiMetalButton>
        <Power className="size-4" /> Engage
      </AntiMetalButton>
      <AntiMetalButton>
        <Lock className="size-4" /> Lock
      </AntiMetalButton>
      <AntiMetalButton disabled>Disabled</AntiMetalButton>
    </div>
  )
}
```

## Source

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

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

const brushed =
  "repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px, transparent 1px, transparent 5px)"

export type AntiMetalButtonProps = React.ComponentProps<"button">

export function AntiMetalButton({ className, children, style, ...props }: AntiMetalButtonProps) {
  return (
    <button
      className={cn(
        "group relative inline-flex h-12 items-center justify-center rounded-xl bg-gradient-to-b from-zinc-600 via-zinc-700 to-zinc-800 p-[3px] text-sm font-semibold tracking-wide text-zinc-200",
        "shadow-[0_0_0_1px_#09090b,0_6px_14px_-4px_rgba(0,0,0,0.7)]",
        "transition-[transform,filter] duration-150 hover:brightness-110 active:translate-y-px active:brightness-90",
        "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
      )}
      style={style}
      {...props}
    >
      <span
        className="relative flex h-full w-full items-center justify-center gap-2 overflow-hidden rounded-[9px] bg-gradient-to-b from-zinc-700 to-zinc-900 px-6 shadow-[inset_0_1px_0_rgba(255,255,255,0.18),inset_0_0_0_1px_rgba(0,0,0,0.55),inset_0_-6px_10px_rgba(0,0,0,0.35)]"
      >
        <span
          aria-hidden
          className="pointer-events-none absolute inset-0 opacity-90"
          style={{ backgroundImage: brushed }}
        />
        <span
          aria-hidden
          className="pointer-events-none absolute inset-x-0 top-0 h-1/2 bg-gradient-to-b from-white/10 to-transparent"
        />
        <span className="relative inline-flex items-center gap-2 [text-shadow:0_-1px_0_rgba(0,0,0,0.8)]">{children}</span>
      </span>
    </button>
  )
}
```