Rainbow Button

CTA cycling the brand ramp, with a matching glow beneath.

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/rainbow-button.json

Adds components/velora/rainbow-button.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`speed` Seconds for one full colour cycle	`number`	`4`
`children*`	`React.ReactNode`	`—`

Also accepts every <button> attribute, forwarded to the root element.

Reduced motion: The colour cycle and glow freeze, leaving a static brand gradient with a still glow beneath; the hover glow and press scale remain.
Keyboard: A native <button>: focusable, activates with Enter or Space, with a visible focus-visible outline.
Screen readers: Announced as a button named by its text content.

CTA cycling the brand ramp, with a matching glow beneath.

pnpm dlx shadcn@latest add https://paulkeys.org/r/rainbow-button.json

Adds components/velora/rainbow-button.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`speed` Seconds for one full colour cycle	`number`	`4`
`children*`	`React.ReactNode`	`—`

Also accepts every <button> attribute, forwarded to the root element.

Reduced motion: The colour cycle and glow freeze, leaving a static brand gradient with a still glow beneath; the hover glow and press scale remain.
Keyboard: A native <button>: focusable, activates with Enter or Space, with a visible focus-visible outline.
Screen readers: Announced as a button named by its text content.