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
Смотрите видео 3 Tricks For Amazing Button Animations (Framer Tutorial) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Tim Gabe 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 15,405 раз и оно понравилось 345 людям.