Rainbow Button

RainbowButton is a fully customizable, animated CTA button designed for modern landing pages, SaaS dashboards, and product marketing screens. It combines a dynamic rainbow border, subtle inner sheen, and a soft glow beneath the button to create a premium, attention-grabbing call to action without needing any custom code.

Every visual detail is exposed as Framer property controls. You can fine-tune the base and hover colors, supply your own rainbow gradient (2–8 colors), adjust animation speed and easing, tweak glow blur and opacity, and control both default and hover shadows with the BoxShadow control. Typography, padding, border radius, and even per-side border colors are all configurable so the button can match any design system.

The button supports real-world usage out of the box: set a label, link URL, choose whether it opens in a new tab, and toggle the disabled state for loading or blocked actions. The component uses framer-motion to animate the gradient horizontally in a loop, and smoothly transitions to your hover background, text color, and shadow when the user interacts with it.

Use RainbowButton for high-value actions like “Start Free Trial”, “Get Unlimited Access”, “Sign Up”, or “Checkout” and instantly give your CTAs a polished, “designed” feel.

Key features:

• Animated rainbow gradient border with continuous motion

• Configurable glow under the button (blur and opacity)

• Separate base and hover colors for both background and text

• Fully editable font (size, weight, family, alignment) via Font control

• Adjustable padding, corner radius, and detailed border settings (per side)

• BoxShadow controls for default and hover shadows

• Link + open-in-new-tab support and disabled state

• Works on both light and dark backgrounds, ideal for hero sections and pricing pages