Gradient Border Button Component in Framer

Here's a recreation of the gradient border button from the official Framer website. Feel free to copy and paste it into your Framer projects and start using it on your site.

Created by

Nandi

Gradient Border Button Component in Framer

About the resource

To pull off this effect, I had to use two code components. Luckily, each was already built by the Framer community.

The gradient border effect is achieved using the code component by Dan Hollick. The flying stars around the buttons are created with the particles component by Benjamin.

About the resource

To pull off this effect, I had to use two code components. Luckily, each was already built by the Framer community.

The gradient border effect is achieved using the code component by Dan Hollick. The flying stars around the buttons are created with the particles component by Benjamin.

About the resource

To pull off this effect, I had to use two code components. Luckily, each was already built by the Framer community.

The gradient border effect is achieved using the code component by Dan Hollick. The flying stars around the buttons are created with the particles component by Benjamin.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

More resources

View all

3D Text Flip Button Component

Component

3D Text Flip Button Component

Component

3D Text Flip Button Component

Component

Forward Traffic Component for Framer

Component

Forward Traffic Component for Framer

Component

Forward Traffic Component for Framer

Component