Today, I am going to show you how to build a Button Slide Animation on hover in Webflow. One of the problems in Webflow is that its native 'Button' element is difficult to style and animate like we can with their other native elements. Today, I am going to show you a simple technique to get around these limitations so that we can build beautiful hover interactions on the buttons in our projects.
I have been using Webflow to build my websites for years. If you are a novice website developer looking to launch a new project or business (and don't know how to code), your best bet is using Webflow. With Webflow, you code visually, and have complete control over your website down to the pixel. No more having to go through style sheets or JSON files in Wordpress in order to customize your site to your needs. With Webflow, you are able to visually code your website from scratch.
One of my favorite parts about Webflow is the ability to create animations easily. With a few clicks, we are able to create subtle but powerful animations that, when implemented correctly, have an amazing ability to take our websites from 'mediocre' to 'professional' with ease. While there is a bit of a learning curve when it comes to these 'interactions', hopping in and playing around for a while will get you 99% of the way to mastery!
One of the problems in Webflow is that its native 'Button' element is limited in the different styling options we can use on it. Today, I am going to show you a simple technique to get around these limitations so that we can build a Button Slide interaction that animates on hover. We are going to do this in 3 steps: 1) We are going to drop in a native Webflow button and set its transparency to 0%. 2) We are going to wrap this button in a div-wrapper that will serve as our styling canvas. 3) We are going to add a div-slider element and animate it by building out our Interaction. After all of this is completed, we will have a beautiful button that animates on hover and we will have circumnavigated the limitations on Webflow's native 'button element. Let's do it!
-------------------
Resources -
🟣 Webflow: https://try.webflow.com/l9bi5zf0cljy
🖱️ Button Guide: https://university.webflow.com/lesson/button
--------------------
Timestamps -
0:00 INTRO
1:01 Dropping In Our Button
1:27 Styling Our Button Wrapper
3:55 Adding Our Button Slider
5:38 Building Out Our Animation
9:37 CONCLUSION
--------------------
👨 WHO AM I -
I'm Alex, a 26 year old Financial Analyst who lives in Nashville, TN. I'm now over half way through my twenties (I'm getting old!) and believe that I've acquired some valuable life advice over the past 6 years that I wish I knew when I was just entering my third decade of life. I make videos to pass on these life lessons to all of you (along with other ideas, tips, tricks, knowledge, experience, stories of success, stories of failure, etc.) so that you all can survive your twenties with more grace than I have managed so far!