Rainbow Button Hq — A button with animated rainbow border

Rainbow Button is a visually striking call-to-action component featuring a continuously animated gradient border that flows smoothly around the button. It supports both inside and outside borders, optional rainbow shadow effects, and fine-grained control over spacing, typography, and animation speed.

Designed for modern interfaces, this button works perfectly for hero sections, pricing pages, and any interaction that needs to stand out while remaining lightweight and responsive.

Key Features

• Animated rainbow gradient border

• Inside or outside border positioning

• Optional animated rainbow shadow

• Custom border sides support

• Adjustable animation speed

• Fully customizable typography and padding

• Link and click handler support

Use Cases

• Primary call-to-action buttons

• Hero sections

• Pricing and checkout pages

• Product launches

• High-impact marketing pages

Best Practices / Tips

• Use slower animation speeds for premium, elegant effects

• Pair with dark backgrounds for maximum contrast

• Disable the shadow for minimal UI designs

What’s Included

• One Rainbow Button component

• Animated gradient border system

• Shadow and border position controls

• Link and interaction support

Who It’s For

• Framer designers and builders

• Marketing and landing pages

• Product and SaaS websites

• No-code creators needing high-impact CTAs