I wanted an iridescent button that didn't look like another spinning rainbow border.

So I built Iridescent Button (Free).

Hover it and the light slowly wipes from the top-left to the bottom-right of the stroke, pauses, travels back, pauses again and loops.

The animation is masked entirely inside the border, while the icon gets its own subtle iridescent treatment.

You can:

• Change the label

• Choose from 10 icons

• Upload your own SVG

• Adjust the iridescence

• Control animation speed

• Tune the soft shadow

• Add links

• Enable an interactive Playground

Simple at rest. A little bit magical when you interact with it.

Iridescent Button — now available for Framer (Free).

I wanted an iridescent button that didn't look like another spinning rainbow border.

So I built Iridescent Button (Free).

Hover it and the light slowly wipes from the top-left to the bottom-right of the stroke, pauses, travels back, pauses again and loops.

The animation is masked entirely inside the border, while the icon gets its own subtle iridescent treatment.

You can:

• Change the label

• Choose from 10 icons

• Upload your own SVG

• Adjust the iridescence

• Control animation speed

• Tune the soft shadow

• Add links

• Enable an interactive Playground

Simple at rest. A little bit magical when you interact with it.

Iridescent Button — now available for Framer (Free).