3 Tricks For Amazing Button Animations (Framer Tutorial)
In this Framer beginner tutorial, we're creating amazing button interactions with just a few simple techniques.
🔴 Working File: https://timgabe.com/resources/easy-bu...
Timecodes
0:00 - Introduction to the buttons
0:39 - Starting the first button with a text field
1:02 - Adjusting the background fill and gradient
1:23 - Matching the gradient colors to an example
1:54 - Adding radius and border to the button
2:27 - Creating a frame for the button container
3:00 - Applying blur to the background frame
3:28 - Adding a 'shine' effect to the button
4:09 - Converting the button into a component
4:22 - Adding a hover state to the button
5:00 - Demonstrating the hover effect
6:05 - Starting the second button with a text field
6:56 - Adding a shadow for a 3D effect
7:32 - Adding another stack for depth
8:00 - Adjusting the pressed state for the button
9:21 - Beginning the third button with a text field
10:49 - Creating the main frame for the third button
13:10 - Setting up the hover and press states for the third button
Watch video 3 Tricks For Amazing Button Animations (Framer Tutorial) online without registration, duration hours minute second in high quality. This video was added by user Tim Gabe 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 15,405 once and liked it 345 people.