# Neon Button

> Neon button with glowing outline and text that fills in on hover; color is configurable.

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

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/neon-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/neon-button-demo.tsx"
import { NeonButton } from "@/components/neon-button"

export default function NeonButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 rounded-2xl bg-black p-12">
      <NeonButton>Connect</NeonButton>
      <NeonButton color="#f0abfc">Enter</NeonButton>
      <NeonButton color="#a3e635">Start</NeonButton>
    </div>
  )
}
```

## Source

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

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

export interface NeonButtonProps extends React.ComponentProps<"button"> {
  /** Any CSS color */
  color?: string
}

export function NeonButton({ color = "#22d3ee", className, style, children, ...props }: NeonButtonProps) {
  return (
    <button
      type="button"
      style={{ "--neon": color, ...style } as React.CSSProperties}
      className={cn(
        "inline-flex h-12 items-center justify-center gap-2 rounded-lg border-2 border-(color:--neon) bg-transparent px-8 text-sm font-semibold tracking-[0.2em] text-(color:--neon) uppercase select-none",
        "shadow-[0_0_8px_var(--neon),inset_0_0_8px_var(--neon)] [text-shadow:0_0_8px_var(--neon)]",
        "transition-[background-color,color,box-shadow,text-shadow] duration-200",
        "hover:bg-(color:--neon) hover:text-black hover:shadow-[0_0_24px_var(--neon),0_0_48px_var(--neon)] hover:[text-shadow:none]",
        "focus-visible:ring-2 focus-visible:ring-(color:--neon) focus-visible:ring-offset-2 focus-visible:ring-offset-black focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      {children}
    </button>
  )
}
```