Rainbow Button
Rainbow Button is a button in the UI HUB buttons collection. A button with a continuously rotating conic-gradient halo border that cycles through all hues of the rainbow. On hover, the halo intensifies.
The component is driven by 5 documented props (children, className, speed, onClick, disabled), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: CSS conic-gradient rainbow halo; Rotation keyframe animation; Pseudo-element or wrapper technique for inner background.
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 Rainbow Button?
Continuously rotating full-spectrum rainbow border button. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
Rainbow Button at a glance
- Category
- Buttons
- Pricing
- Free to use
- Libraries
- Framer Motion
- Styling
- Tailwind CSS
- Configurable props
- 5
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Rainbow Button works
A button with a continuously rotating conic-gradient halo border that cycles through all hues of the rainbow. On hover, the halo intensifies.
Technical information for Rainbow Button
| Category | Buttons |
|---|---|
| Libraries | Framer Motion |
| Styling | Tailwind CSS |
| Rendering | CSS gradients, CSS filters, requestAnimationFrame |
| State change | slow rainbow rotation to faster / brighter on hover |
| Props | 5 configurable |
| Usage example | Included on this page |
What Rainbow Button requires
- CSS conic-gradient rainbow halo
- Rotation keyframe animation
- Pseudo-element or wrapper technique for inner background
- Hover speed/brightness increase
How to use Rainbow Button
- Install the dependencies: npm install framer-motion.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <RainbowButton /> in your page using that import path.
- Pass any of the 5 documented props to change colours, density, speed or behaviour.
Rainbow Button questions
What is Rainbow Button?
Continuously rotating full-spectrum rainbow border button. It is built as a React and Tailwind CSS component and can be previewed directly on this page.
How does Rainbow Button work?
A button with a continuously rotating conic-gradient halo border that cycles through all hues of the rainbow. On hover, the halo intensifies.
Which category does Rainbow Button belong to?
Rainbow 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 Rainbow Button?
Button label or inner content. It defaults to "Rainbow".
What does the className prop do in Rainbow Button?
Additional CSS classes. It defaults to "".
Is Rainbow Button free to use?
Rainbow 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 Rainbow Button use?
Rainbow Button uses Framer Motion and is styled with Tailwind CSS.
What does Rainbow Button need to run?
Rainbow Button needs CSS conic-gradient rainbow halo, Rotation keyframe animation, Pseudo-element or wrapper technique for inner background and Hover speed/brightness increase.