Button - Neon

A dynamic and customizable button with an animated glowing border using GSAP + Framer Motion.

The ButtonNeon is a sleek animated button with a glowing border that can be customized for color, intensity, and animation speed.
It uses GSAP for glowing animation and Framer Motion for hover/tap effects.

Live Preview

Open in

Gsap

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	`undefined`	The content inside the button (text, icon, etc.).
`className`	`string`	`""`	Custom Tailwind CSS classes for styling the button.
`onClick`	`(e: React.MouseEvent<HTMLButtonElement>) => void`	`undefined`	Callback when the button is clicked.
`glowColor`	`string`	`"#ffffff"`	Glow color (default is white).
`glowIntensity`	`number`	`20`	Intensity of the glow (higher = stronger glow).
`duration`	`number`	`1.5`	Duration (in seconds) for glow animation cycle.
`repeat`	`number`	`-1`	Number of times animation repeats (`-1` = infinite).
`yoyo`	`boolean`	`true`	Whether the glow reverses back after animation.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Button type.
`disabled`	`boolean`	`false`	Disables the button when set to `true`.

Default (White Glow)

<NeonBorderButton onClick={() => alert("Clicked!")}>
  White Glow
</NeonBorderButton>

Custom Glow Color

<NeonBorderButton glowColor="#00ffcc" glowIntensity={30}>
  Cyan Glow
</NeonBorderButton>

Fast Animation

<NeonBorderButton glowColor="#ff00ff" duration={0.8}>
  Fast Purple Glow
</NeonBorderButton>

Disabled Button

<NeonBorderButton disabled>
  Disabled Glow
</NeonBorderButton>

Full Width with Tailwind Override

<NeonBorderButton className="w-full text-lg font-bold">
  Full Width Glow
</NeonBorderButton>