Nudge Button Component in Framer

Copy component

Nudge Button Component in 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

Nudge Button Component in Framer

This is a stylish Nudge Button component created by Preet, featuring a nudge effect with a shimmering text on hover. Simply copy and paste it into your Framer project to add an eye-catching button to your site, tweak it to add extra style.

image of Nandi Muzsik
image of Prianca S.
image of Preet Mishra

Created by

'Buy Now' button with seat availability
'Buy Now' button with seat availability
'Buy Now' button with seat availability

About the resource

To create this button, we simply have to create a component in Framer with two variants. One variant will be the default state of the button, and the other variant will be the hover state of the button. We make all the changes to the hover variant that we want to see animated when we hover over it.

About the resource

To create this button, we simply have to create a component in Framer with two variants. One variant will be the default state of the button, and the other variant will be the hover state of the button. We make all the changes to the hover variant that we want to see animated when we hover over it.

About the resource

To create this button, we simply have to create a component in Framer with two variants. One variant will be the default state of the button, and the other variant will be the hover state of the button. We make all the changes to the hover variant that we want to see animated when we hover over it.

Hover effect on 'Buy Now' button showing seat availability

The two variants of the component.

Hover effect on 'Buy Now' button showing seat availability

The two variants of the component.

Hover effect on 'Buy Now' button showing seat availability

The two variants of the component.

You might notice a small fun detail on the component, which is the shimmer effect on the text that we see when we hove over the button. That effect is created in a similar way to the actual button. We just create two component variants for a text layer, and we animate a mask from left to right. In this case, the interaction trigger between the variants will not be mouse enter and mouse leave, but appear so it plays automatically.

If you want to learn how to create this shimmer effect from scratch, watch this video.

You might notice a small fun detail on the component, which is the shimmer effect on the text that we see when we hove over the button. That effect is created in a similar way to the actual button. We just create two component variants for a text layer, and we animate a mask from left to right. In this case, the interaction trigger between the variants will not be mouse enter and mouse leave, but appear so it plays automatically.

If you want to learn how to create this shimmer effect from scratch, watch this video.

You might notice a small fun detail on the component, which is the shimmer effect on the text that we see when we hove over the button. That effect is created in a similar way to the actual button. We just create two component variants for a text layer, and we animate a mask from left to right. In this case, the interaction trigger between the variants will not be mouse enter and mouse leave, but appear so it plays automatically.

If you want to learn how to create this shimmer effect from scratch, watch this video.

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