New

NeonButton

Button with neon glow effect using box-shadow, pulse animation, and hover intensify.

Creative & Uniqueneonglowbuttoncyberpunkanimation

Dependencies

No additional dependencies needed.

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3export default function NeonButton() {
4  return (
5    <div className="flex flex-col items-center gap-8 rounded-2xl bg-zinc-950 p-16">
6      <style>{`
7        @keyframes neon-pulse {
8          0%, 100% { box-shadow: 0 0 5px var(--neon-color), 0 0 20px var(--neon-color), 0 0 40px var(--neon-color-dim); }
9          50% { box-shadow: 0 0 10px var(--neon-color), 0 0 30px var(--neon-color), 0 0 60px var(--neon-color-dim), 0 0 80px var(--neon-color-dim); }
10        }
11        @keyframes text-flicker {
12          0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
13          20%, 24%, 55% { opacity: 0.6; }
14        }
15      `}</style>
16
17      {/* Violet neon */}
18      <button
19        className="relative rounded-lg border-2 border-violet-400 bg-transparent px-8 py-3 font-bold tracking-widest text-violet-400 uppercase transition-all duration-300 hover:bg-violet-400/10 hover:text-white"
20        style={{
21          "--neon-color": "rgba(167, 139, 250, 0.8)",
22          "--neon-color-dim": "rgba(167, 139, 250, 0.3)",
23          animation: "neon-pulse 2s ease-in-out infinite",
24          textShadow: "0 0 10px rgba(167, 139, 250, 0.8), 0 0 20px rgba(167, 139, 250, 0.4)",
25        } as React.CSSProperties}
26      >
27        Activate
28      </button>
29
30      {/* Cyan neon */}
31      <button
32        className="relative rounded-lg border-2 border-cyan-400 bg-transparent px-8 py-3 font-bold tracking-widest text-cyan-400 uppercase transition-all duration-300 hover:bg-cyan-400/10 hover:text-white"
33        style={{
34          "--neon-color": "rgba(34, 211, 238, 0.8)",
35          "--neon-color-dim": "rgba(34, 211, 238, 0.3)",
36          animation: "neon-pulse 2s ease-in-out infinite 0.5s",
37          textShadow: "0 0 10px rgba(34, 211, 238, 0.8), 0 0 20px rgba(34, 211, 238, 0.4)",
38        } as React.CSSProperties}
39      >
40        Initialize
41      </button>
42
43      {/* Rose neon */}
44      <button
45        className="relative rounded-lg border-2 border-rose-400 bg-transparent px-8 py-3 font-bold tracking-widest text-rose-400 uppercase transition-all duration-300 hover:bg-rose-400/10 hover:text-white"
46        style={{
47          "--neon-color": "rgba(251, 113, 133, 0.8)",
48          "--neon-color-dim": "rgba(251, 113, 133, 0.3)",
49          animation: "neon-pulse 2s ease-in-out infinite 1s",
50          textShadow: "0 0 10px rgba(251, 113, 133, 0.8), 0 0 20px rgba(251, 113, 133, 0.4)",
51        } as React.CSSProperties}
52      >
53        Launch
54      </button>
55
56      <p className="text-xs text-zinc-600" style={{ animation: "text-flicker 3s infinite" }}>SYSTEM READY</p>
57    </div>
58  );
59}