Glow Button
FreeButton with a mouse-tracking radial gradient glow effect. Two variants, three sizes.
Buttons · primitive · basic · css · zero dependencies
glowColor="rgba(242,166,90,.55)" — the glow follows the cursor
Button with a mouse-tracking radial gradient glow effect. Two variants, three sizes.
- hero section primary CTA
- pricing page upgrade button
- navbar sign-up button
- landing page get-started button
| 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. |
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.