Velora UI

Rainbow Button

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

  • 0.8 KB gzipped
  • Zero dependencies
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/rainbow-button.json

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

Props

PropTypeDefault
speed

Seconds for one full colour cycle

number4
children*React.ReactNode—

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

Accessibility

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.