Neon Button

ctafrom Community Creative

Live

AI Usage Rules

Use NeonButton for high-impact CTAs on dark backgrounds. The neon glow effect is most visible on dark surfaces. Choose color to match your brand. Limit to 1-2 per section.

Code Template

interface NeonButtonProps extends React.ComponentProps<"button"> {
  color?: "blue" | "purple" | "pink" | "green"
}

const neonColors = {
  blue: { bg: "bg-cyan-500", shadow: "shadow-[0_0_20px_rgba(0,212,255,0.5)]", hoverShadow: "hover:shadow-[0_0_30px_rgba(0,212,255,0.7),0_0_60px_rgba(0,212,255,0.3)]", ring: "ring-cyan-400" },
  purple: { bg: "bg-violet-500", shadow: "shadow-[0_0_20px_rgba(139,92,246,0.5)]", hoverShadow: "hover:shadow-[0_0_30px_rgba(139,92,246,0.7),0_0_60px_rgba(139,92,246,0.3)]", ring: "ring-violet-400" },
  pink: { bg: "bg-pink-500", shadow: "shadow-[0_0_20px_rgba(236,72,153,0.5)]", hoverShadow: "hover:shadow-[0_0_30px_rgba(236,72,153,0.7),0_0_60px_rgba(236,72,153,0.3)]", ring: "ring-pink-400" },
  green: { bg: "bg-emerald-500", shadow: "shadow-[0_0_20px_rgba(16,185,129,0.5)]", hoverShadow: "hover:shadow-[0_0_30px_rgba(16,185,129,0.7),0_0_60px_rgba(16,185,129,0.3)]", ring: "ring-emerald-400" },
}

export function NeonButton({ color = "blue", className, children, ...props }: NeonButtonProps) {
  const c = neonColors[color]
  return (
    <button className={`relative inline-flex items-center justify-center rounded-full px-8 py-3 text-sm font-bold text-white transition-all duration-300 ${c.bg} ${c.shadow} ${c.hoverShadow} hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black ${c.ring} ${className ?? ""}`} {...props}>
      {children}
    </button>
  )
}

Props Schema

Property	Type	Default	Description
color	string	—
children	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "color": {
      "enum": [
        "blue",
        "purple",
        "pink",
        "green"
      ],
      "type": "string"
    },
    "children": {
      "type": "string"
    }
  }
}