Component
Nudge Button Component in Framer
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.
The two variants of the component.
The two variants of the component.
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.
