An animated button with a rainbow effect.
Installation
npx nyxb@latest add rainbow-buttonUpdate the import paths to match your project setup.
Update globals.css
Add the following to your globals.css file:
:root {
--color-1: 0 100% 63%;
--color-2: 270 100% 63%;
--color-3: 210 100% 63%;
--color-4: 195 100% 63%;
--color-5: 90 100% 63%;
}Update tailwind.config.ts
Add the following animations to your tailwind.config.ts file:
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
"color-1": "hsl(var(--color-1))",
"color-2": "hsl(var(--color-2))",
"color-3": "hsl(var(--color-3))",
"color-4": "hsl(var(--color-4))",
"color-5": "hsl(var(--color-5))",
},
animation: {
rainbow: "rainbow var(--speed, 2s) infinite linear",
},
keyframes: {
rainbow: {
"0%": { "background-position": "0%" },
"100%": { "background-position": "200%" },
},
},
},
},
};Props
| Prop | Type | Description |
|---|---|---|
| children | React.ReactNode | The content to be displayed inside the button. |