Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Component
This is an Save Button Micro-Interaction recreated in Framer from Yanis Lebzar’s original work. Copy the component into your own project or remix the file to see how a micro-interaction like this can be made in Framer without writing a single line of code.
To build this save button animation, I set up a component with four variants. Each state has its own text layer sitting in the specific spot using absolute positioning. Each state uses a separate text layer placed with absolute positioning and a subtle text effects. Then it’s just a matter of switching visibility on and off as the button moves through each state.
All of it comes together with simple click and appear interactions, making the whole micro-interaction feel smooth without needing any code at all.
To build this save button animation, I set up a component with four variants. Each state has its own text layer sitting in the specific spot using absolute positioning. Each state uses a separate text layer placed with absolute positioning and a subtle text effects. Then it’s just a matter of switching visibility on and off as the button moves through each state.
All of it comes together with simple click and appear interactions, making the whole micro-interaction feel smooth without needing any code at all.
To build this save button animation, I set up a component with four variants. Each state has its own text layer sitting in the specific spot using absolute positioning. Each state uses a separate text layer placed with absolute positioning and a subtle text effects. Then it’s just a matter of switching visibility on and off as the button moves through each state.
All of it comes together with simple click and appear interactions, making the whole micro-interaction feel smooth without needing any code at all.
The save button component and its variants.
The save button component and its variants.
The save button component and its variants.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
