Prototyping Button Hover Animation In Figma
In this video, I'm going to show you how to prototype several button hover animations in Figma. I'll walk you through several examples, including an inverse effect, a sliding down effect, and a 3D drop shadow effect.
----------------------
Disclosure: There are affiliate links below, and I may receive commissions for purchases made through these links.
Tools/Resources I'm Currently Using :
💻 Apple 2023 MacBook Pro Laptop M3 chip
https://amzn.to/47iLnyh
---------------------------
Screen Studio - Screen Recorder Used To Record Video
https://bit.ly/4cL5xnE
---------------------------
👉 Access the world’s largest library of Figma & Webflow components
https://bit.ly/blrelume
---------------------------
👉Try Webflow
https://bit.ly/401OitS
---------------------------
👉 Use BRIAN99512 at checkout and get 20% OFF at FULLERMOE. Watch a demo here!
https://fullermoe.com/welcome
---------------------------
👉 Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Check out Untitled UI. Save thousands of hours, and level up as a designer.
https://bit.ly/49Q7xds
---------------------------
👉Sonduck Film Motion Graphic Templates
https://www.sonduckfilm.com/?ref=22
---------------------------
👉 Envato Elements
https://1.envato.market/yR6A4b
---------------------------
Timecode:
0:00 Intro
0:11 Designing The Base Button
2:00 Button 1 - "The Inverse Effect"
3:35 Button 2 - "The Slide Down Effect"
6:40 Button 3 - "The Expanding Circle Effect"
9:35 Button 4 - "The 3D Drop Shadow Effect"
12:55 Outro - Thanks For Watching
#Figma