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>
  )
}
Install

More like this

Texture Button

Liquid Metal Button

Glow Button
