# Glow Button

> Neon halo button whose box-shadow glow grows on hover.

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

## Install

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

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

## Dependencies

No extra dependencies.

## Usage

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

export default function GlowButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8 rounded-2xl bg-zinc-950 p-12">
      <GlowButton>Violet</GlowButton>
      <GlowButton glowColor="#22d3ee">Cyan</GlowButton>
      <GlowButton glowColor="#f472b6">Pink</GlowButton>
    </div>
  )
}
```

## Source

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

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

export interface GlowButtonProps extends React.ComponentProps<"button"> {
  /** Neon color of the halo */
  glowColor?: string
}

export function GlowButton({ glowColor = "#8b5cf6", className, children, style, ...props }: GlowButtonProps) {
  return (
    <button
      className={cn(
        "relative inline-flex h-11 items-center justify-center gap-2 rounded-lg border px-7 text-sm font-semibold text-white",
        "bg-[color-mix(in_srgb,var(--glow)_22%,#09090b)] border-[color-mix(in_srgb,var(--glow)_70%,transparent)]",
        "shadow-[0_0_12px_-2px_var(--glow),0_0_24px_-6px_var(--glow)] transition-[box-shadow,transform] duration-300",
        "hover:shadow-[0_0_20px_2px_var(--glow),0_0_56px_6px_var(--glow)] active:scale-[0.97]",
        "focus-visible:ring-2 focus-visible:ring-white/60 focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      style={{ ["--glow" as string]: glowColor, ...style }}
      {...props}
    >
      {children}
    </button>
  )
}
```