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

  • Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

    Minimalist music player design featuring Lorde's album Melodrama with track progress and cursor interaction

    Music Player Widget Interaction in Framer

    Component

  • Illustration of an invoice document in a blue folder with pricing details for iOS and web apps

    Folder Micro-Interaction in Framer

    Component

    Illustration of an invoice document in a blue folder with pricing details for iOS and web apps

    Folder Micro-Interaction in Framer

    Component

    Illustration of an invoice document in a blue folder with pricing details for iOS and web apps

    Folder Micro-Interaction in Framer

    Component