Glow Button
Glow Button is a button in the UI HUB buttons collection. A button with a radial glow that intensifies on hover. The glow tracks the mouse within the button for a liquid-light feel.
The component is driven by 7 documented props (children, className, glowColor, glowSize, glowOpacity, onClick and 1 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Mouse position tracking relative to button; Radial gradient that follows cursor; Configurable glow color and radius.
Preview the button in the browser above, copy the source, and paste it into your project. Buttons components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Glow Button?
Premium glow-on-hover button with mouse-tracking light. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Glow Button at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- Framer Motion
- Styling
- Tailwind CSS
- Configurable props
- 7
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Glow Button works
A button with a radial glow that intensifies on hover. The glow tracks the mouse within the button for a liquid-light feel.
Technical information for Glow Button
| Category | Buttons |
|---|---|
| Libraries | Framer Motion |
| Styling | Tailwind CSS |
| Rendering | CSS gradients, CSS filters |
| State change | subtle ambient glow to intense mouse-tracked radial glow |
| Props | 7 configurable |
| Usage example | Not published yet |
What Glow Button requires
- Mouse position tracking relative to button
- Radial gradient that follows cursor
- Configurable glow color and radius
- Smooth opacity transition
Glow Button questions
What is Glow Button?
Premium glow-on-hover button with mouse-tracking light. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Glow Button work?
A button with a radial glow that intensifies on hover. The glow tracks the mouse within the button for a liquid-light feel.
Which category does Glow Button belong to?
Glow Button is listed under Buttons in the UI HUB catalog. Call-to-action buttons with real interaction design: magnetic pull on hover, glow and shimmer sweeps, press states and SVG-based shape morphs. Each button accepts its own label, href and colour props, so it drops into an existing layout without forcing a wrapper. Accessible focus states are preserved in every variant.
What does the children prop do in Glow Button?
Button content. It defaults to "Glow".
What does the className prop do in Glow Button?
Additional CSS classes. It defaults to "".
Is Glow Button free to use?
Glow Button is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Glow Button use?
Glow Button uses Framer Motion and is styled with Tailwind CSS.
What does Glow Button need to run?
Glow Button needs Mouse position tracking relative to button, Radial gradient that follows cursor, Configurable glow color and radius and Smooth opacity transition.