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
CMW Labs
