Animated Buttons in Framer (Step-by-Step Tutorial)

Learn how to create an animated button in Framer with hover effects on both the background and label/icon. I'll walk you through the techniques step-by-step so you can add polished interactions to your projects. ⚡Build awesome websites with Framer: https://framer.link/adipurdila Subscribe to my channel for more awesome videos: https://www.youtube.com/@AdiPurdila?sub_confirmation=1 ⏱️ Video chapters 00:00 Intro 00:19 Creating the Button 02:45 Animating the Icon 05:19 Animating the Label 09:01 Animating the Background 13:20 Conclusion ⭐️ Resources: → Remix this project: https://framer.link/myYqnxw → Download Framer: https://framer.link/adipurdila 🎓 My Design Classes → Watch all my Skillshare classes: https://www.skillshare.com/en/r/user/adipurdila Use the link above to get 1 month free on Skillshare. 👋🏼 I'm Adi I'm a passionate web designer and front-end developer with over 10 years of experience. For the past few years, I've been dedicated to sharing my knowledge through tutorials and courses. Outside of work, I'm a big animal lover and enjoy spending time with my furry and feathery friends. 🐶🐈🐓🦆🐇 Let's learn and grow together! 💬 Let's get in touch → Adi Purdila Studio: https://www.adipurdila.studio → Hire me on Contra: https://contra.com/adipurdila/work?r=adipurdila → LinkedIn: https://www.linkedin.com/in/adi-purdila/ → Dribbble: https://dribbble.com/adipurdila → Instagram: https://instagram.com/adipurdila/ → X: https://twitter.com/adipurdila -------------------------------------------------------------------------------- Some of the links I provided may be affiliate links for products and platforms I use on a regular basis. By using these links, you support my channel, for which I am incredibly grateful. Your support helps sustain and grow the channel, and I sincerely appreciate your awesomeness!