Back
Rainbow Button
Satu Visual ComponentNew
A button with an animated rainbow gradient and matching glow.
Installation
Add it with the CLI:
Terminal
$
Or open the Code tab above and copy it in manually — it relies on the standard cn() helper from @/lib/utils.
Usage
A bold CTA. The gradient and its glow slide continuously.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Button content. |
| className | string | — | Extra classes. |
| ...props | ButtonHTMLAttributes | — | Native <button> props. |
Requirements
No external npm dependencies. ✨
Add this to your Tailwind config:
tailwind.config.ts
// theme.extend
animation: { rainbow: "rainbow 3s linear infinite" },
keyframes: {
rainbow: {
"0%": { "background-position": "0% 50%" },
"100%": { "background-position": "200% 50%" },
},
},