Resources

Gradient Border Button Component in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Gradient Border Button Component in Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

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.

image of Nandi Muzsik

Created by

Nandi

Gradient Border Button Component in Framer
Gradient Border Button Component in Framer
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

Nandi portrait's background
Nandi's portrait

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

Nandi portrait's background
Nandi's portrait

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

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Animated Dotted Video Component in Framer with circular halftone pattern on a black background and bold white text overlay

    Dotted Video Component for Framer

    Component

    Animated Dotted Video Component in Framer with circular halftone pattern on a black background and bold white text overlay

    Dotted Video Component for Framer

    Component

    Animated Dotted Video Component in Framer with circular halftone pattern on a black background and bold white text overlay

    Dotted Video Component for Framer

    Component

  • Metallic 3D call-to-action button with glowing blue arrow and text 'Lets Grow!' on dark background – modern UI design element with hover interaction

    Metallic 3D Button Interaction in Framer

    Component

    Metallic 3D call-to-action button with glowing blue arrow and text 'Lets Grow!' on dark background – modern UI design element with hover interaction

    Metallic 3D Button Interaction in Framer

    Component

    Metallic 3D call-to-action button with glowing blue arrow and text 'Lets Grow!' on dark background – modern UI design element with hover interaction

    Metallic 3D Button Interaction in Framer

    Component