About Iridescent Button

Turn an ordinary CTA into a polished interaction with a smooth iridescent border that comes alive on hover.

Instead of a constantly spinning rainbow, Iridescent Button uses a carefully timed light sweep. The colour travels from the top-left to the bottom-right, pauses, glides back, pauses again, and repeats — all masked precisely inside the button stroke.

The result is subtle at rest and beautifully noticeable when someone interacts with it.

What You Can Customize

Change the label, colors, radius, typography, padding, border, shadow, hover lift, animation speed and iridescent intensity directly from Framer.

Choose from 10 built-in icons or upload your own SVG. The icon receives its own iridescent treatment while remaining clearly visible at rest.

Add a link and the component automatically behaves as a proper link while preserving the interaction.

Playground

Enable the optional Playground to experiment with Iridescence, Speed and Shadow directly in Preview. Disable it when you're ready to publish.

Built Properly

Responsive Framer component with sensible default dimensions, semantic button/link markup, keyboard focus support, reduced-motion handling and a static-renderer fallback.