Animated Buttons in Framer (Step-by-Step Tutorial)
4.2K views · 2026-02-10
UI Design
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!
⚡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!