Webflow Animation | How to Animate a Button on Hover in Webflow for Beginners

In this tutorial, we'll dive into Webflow animations, focusing specifically on how to do button animations on hover in Webflow. We'll create a button with a relative position, then create a circle with an absolute position. We'll animate and scale the circle up, and animate the text color simultaneously. We'll change the animation duration, set it to Ease In Out, and we'll make an animation for hover in, and hover out. The Ease In Out will make the animation look very smooth!
Hope it helps and thank you very much for watching!
-Andrew
👨‍💻🚀 Webflow Tutorial playlist: • Webflow Tutorials
If you still need a Webflow account to get started, you can do that here: webflow.partnerlinks.io/TechC... (❤️ affiliate link ❤️).
❤️ Say thanks/buy me a coffee/support the channel ❤️: www.buymeacoffee.com/techcheck
Affiliate links to some of my gear 🤘🙏❤️
(Best quality for the best price from my research)
Awesome Accent Lights 😎: amzn.to/3UCaHvO
Maono Microphone: amzn.to/3SxAVN6
Logitech Webcam: amzn.to/3OyIORm
Wireless Mouse: amzn.to/3OwYFzG
Wrist Pads: amzn.to/4bplhfn

[@akinolavictor4685]

This was really helpful. Nice animation

[@techcheck3042]

Thanks! Glad it was helpful 🙂

[@mikejmahon28]

Webflow is a game changer!

[@techcheck3042]

It really is! 🎉🙌

[@JahgrantAiyedun-le9dp]

I enjoyed this tutorial 🎉🎉🎉. Very helpful!!!

[@techcheck3042]

Awesome to hear! Thank you! 🙏

[@pablorivera6989]

amazing video thanks

[@techcheck3042]

Thank you!! Glad it helped

[@Human_Evolution-]

So that program turns your design i to code that you can paste into your code base? If so, why not show the code you created? Unless i missed something i did not see code. I skipped a few spots

[@techcheck3042]

No, it didn't convert my design into code. Webflow is a no code/low code tool that is amazing if you haven't checked it out. It's like Wix or Squarespace, but let's you visually apply CSS (style bar on the right), so you can match designs perfectly and make everything exactly how you want. It also has a CMS and let's you loop over those items, styling each item as you need. Very powerful. They do have a Figma to Webflow plugin that lets you copy over your design, but you have to setup your design a certain way for it to work properly. You have to use auto layout (basically flexbox).

[@techcheck3042]

I have an affiliate link in the description if you want to check it out. Highly recommend. I have another video where we use a webflow template and customize that. kzbin.info/www/bejne/gnjSpaZniZxgebc

[@Human_Evolution-]

@@techcheck3042 cool thank you. Does it show the code?

[@techcheck3042]

@@Human_Evolution- you can add html elements, visually apply css, add class names, create components, etc. You can inspect using your browser/devtools, but in general, I don’t think they show you the code. I’ve also never tried, though 😅

[@Human_Evolution-]

@@techcheck3042 aww okay. I think Figma create the code for you. I've never tried the one you're using. In the age of AI I'm kind of surprised not to see code here.