Sweep Hover Button Component for Framer

Copy component

Sweep Hover Button Component for Framer

Copy component

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

Sweep Hover Button Component for Framer

This is a sweep hover button component for Framer that creates an animated hover effect where a colored background "sweeps" across the button on hover. The component is fully customizable through properties, allowing you to easily adjust colors, text. Feel free to copy and paste it into your project and start using it, or just remix it to see how it's built.

image of Nandi Muzsik

Created by

Sweep Hover Button Component for Framer
Sweep Hover Button Component for Framer
Sweep Hover Button Component for Framer

About the resource

To create this component, I just created a button component with a hover variant. To reveal the hover version of the component (with different colors), I used the masking feature in Framer. I just had to tweak the mask's properties on the default and hover variants and that's it.

The component is fully customizable through the following properties found on the right panel:

  • Customizable button text/label via the "Label" property

  • Ability to set a link for the button

  • Adjustable background colors for default and hover states

  • Customizable text colors for default and hover states

About the resource

To create this component, I just created a button component with a hover variant. To reveal the hover version of the component (with different colors), I used the masking feature in Framer. I just had to tweak the mask's properties on the default and hover variants and that's it.

The component is fully customizable through the following properties found on the right panel:

  • Customizable button text/label via the "Label" property

  • Ability to set a link for the button

  • Adjustable background colors for default and hover states

  • Customizable text colors for default and hover states

About the resource

To create this component, I just created a button component with a hover variant. To reveal the hover version of the component (with different colors), I used the masking feature in Framer. I just had to tweak the mask's properties on the default and hover variants and that's it.

The component is fully customizable through the following properties found on the right panel:

  • Customizable button text/label via the "Label" property

  • Ability to set a link for the button

  • Adjustable background colors for default and hover states

  • Customizable text colors for default and hover states

component properties

Framer component properties of the button.

component properties

Framer component properties of the button.

component properties

Framer component properties of the button.

To use the component, simply add it to your Framer project and customize the properties as needed. The sweep animation will automatically trigger on hover. This provides an easy way to add a polished, interactive button element to Framer websites without any coding required.

To use the component, simply add it to your Framer project and customize the properties as needed. The sweep animation will automatically trigger on hover. This provides an easy way to add a polished, interactive button element to Framer websites without any coding required.

To use the component, simply add it to your Framer project and customize the properties as needed. The sweep animation will automatically trigger on hover. This provides an easy way to add a polished, interactive button element to Framer websites without any coding required.

Framer Navigator

Learn the fundamentals of Framer for free.

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

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.

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.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

  • 3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component

    3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component

    3D slideshow showcasing modern cycling and lifestyle themes

    Smooth 3D Slideshow in Framer

    Component