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

Props

NeonButtonProps

Install

More like this

Glow Button

Liquid Metal Button

Hover Glow Button