Rainbow Button

A stunning animated button with rainbow gradient border, text, and glow effects. The gradient animates on hover for an eye-catching call-to-action.

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/rainbow-button.json

Usage

tsx
14 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { RainbowButton } from "@/components/ui/rainbow-button"

export default function CTA() {
  return (
    <div className="bg-neutral-950 p-8">
      <RainbowButton 
        size="lg"
        onClick={() => console.log("Clicked!")}
      >
        Get Started Now!
      </RainbowButton>
    </div>
  )
}

Sizes

Small

Medium (Default)

Large

Examples

Call to Action

Subscribe Button

Fast Animation

Thick Border

Disabled State

Fun with Nyxhora

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Button text/content (required)
onClick() => voidundefinedClick handler function
disabledbooleanfalseWhether the button is disabled
size'sm' | 'md' | 'lg'mdButton size variant
borderWidthnumber1.5Border width in pixels
animationDurationnumber3Animation duration in seconds
classNamestringundefinedAdditional CSS classes