Radial Glow Button
Radial Glow Button is a button in the UI HUB buttons collection. Animated radial-gradient surface that drifts, a 1px gradient border that rotates, and a light sweep that crosses the button on hover — all via CSS @property-registered custom properties.
The component is driven by 2 documented props (children, className), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: @property-registered custom properties; radial-gradient surface with animated stops; mask-composite: exclude 1px border.
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 Radial Glow Button?
Gradient button with drifting glow and light sweep. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Radial Glow Button at a glance
- Category
- Buttons
- Pricing
- Free to use
- Styling
- Tailwind CSS
- Configurable props
- 2
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Radial Glow Button works
Animated radial-gradient surface that drifts, a 1px gradient border that rotates, and a light sweep that crosses the button on hover — all via CSS @property-registered custom properties.
Technical information for Radial Glow Button
| Category | Buttons |
|---|---|
| Libraries | React only |
| Styling | Tailwind CSS |
| Rendering | CSS gradients |
| State change | drifting gradient, border idle, shine hidden to retuned gradient stops, rotated border angle, shine sweep visible |
| Props | 2 configurable |
| Usage example | Included on this page |
What Radial Glow Button requires
- @property-registered custom properties
- radial-gradient surface with animated stops
- mask-composite: exclude 1px border
- container-type: size shine sweep
- 0.75s registered-property transitions
How to use Radial Glow Button
- Install React if your project does not already use it.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <RadialGlowButton /> in your page using that import path.
- Pass any of the 2 documented props to change colours, density, speed or behaviour.
Radial Glow Button questions
What is Radial Glow Button?
Gradient button with drifting glow and light sweep. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Radial Glow Button work?
Animated radial-gradient surface that drifts, a 1px gradient border that rotates, and a light sweep that crosses the button on hover — all via CSS @property-registered custom properties.
Which category does Radial Glow Button belong to?
Radial 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 Radial Glow Button?
The button label content. It defaults to "Get Extension".
What does the className prop do in Radial Glow Button?
Extra classes merged onto the button. It defaults to "".
Is Radial Glow Button free to use?
Radial 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.
What does Radial Glow Button need to run?
Radial Glow Button needs @property-registered custom properties, radial-gradient surface with animated stops, mask-composite: exclude 1px border and container-type: size shine sweep.