Glow Button

Free

Button with a mouse-tracking radial gradient glow effect. Two variants, three sizes.

Buttons · primitive · basic · css · zero dependencies

glow-button Buttons·preview
Mouse-tracking glow

glowColor="rgba(242,166,90,.55)" — the glow follows the cursor

size
variant
Glow Button

Button with a mouse-tracking radial gradient glow effect. Two variants, three sizes.

Free component

Free at launch — join the waitlist and unlock it day one.

Join the waitlist

No card required.

Use it for
  • hero section primary CTA
  • pricing page upgrade button
  • navbar sign-up button
  • landing page get-started button
Props
Prop Type Default Description
children React.ReactNode Button label or content.
variant "primary" | "ghost" "primary" Filled violet style or transparent outline style.
glowColor string "rgba(167,139,250,0.5)" Color of the cursor-tracking glow, as an rgba value.
size "sm" | "md" | "lg" "md" Controls padding and font size.
className string Additional classes to override or extend the button styling.
FAQ
Does Glow Button work with Next.js App Router?

Yes. It's a "use client" React component and works as a client component in the App Router.

Are there any dependencies to install?

None. It's built with React state and CSS radial gradients — no external packages required.

Is it responsive?

Yes. Sizing is controlled by the size prop and standard Tailwind padding classes, so it behaves like a normal inline button in any layout or breakpoint.

Does it respect prefers-reduced-motion?

Not automatically. The glow fade is a short CSS transition (200–300ms) rather than a continuous animation, but there's no reduced-motion media query guarding it — override the transition in your own CSS if you need to disable it.