Discover the best button-interaction websites created by professional designers. Get inspired and start planning your perfect button-interaction web design today!

Vibrand Design

We built 20 CSS Button Hover Styles inspired by Codrops for the Webflow Community. 
Copy them, modify them, and have fun using them in your own projects.

You want more?
Just tell us what kind of component or layout you'd like and we'll build it for the community.

✌ If you like this project, don't be shy and follow our Webflow profile to not miss any future clonables for the Webflow community.

Best wishes from Germany and stay healthy!

Vibrand Design

20 CSS Button Hover Styles

Magnetic buttons are sorta like regular buttons, if regular buttons were zapped to life with witchcraft by html super-wizards from the future 🧲🧙‍♂️🧲🧙‍♂️

In all seriousness, this type of button is a dead-simple, easy way to add effective hover micro-interactions to any website. I hope you enjoy exploring how these buttons were made. Hopefully it helps spread understanding of the power of reusable interactions; one mouse movement interaction powers 90% of the button movement in this project.

Clone away, and let me know what you think in the comments!

*Inspired by this post from CoDrops:
https://tympanus.net/codrops/2020/08/05/magnetic-buttons/

**Like this project?
http://buymeacoffee.com/joshwork

Magnetic Buttons

🧲🧙‍♂️ MAGNETIC buttons, from the future! 🧲🧙‍♂️

Looking to have an out-of-the-box button design for your Webflow website? Clone our set of 16 button components and copy your favorite to your website.

- - - - - - - - - -

Interested in this free Webflow Cloneable?

• Check out a live preview on: https://buttons-cloneable-brixtemplates.webflow.io/

• Click 'Clone project' to get a clone on your Webflow account

- - - - - - - - - -

• BRIX Templates - Looking for more Webflow templates? Take a look at our collection of premium & free Webflow Templates on https://brixtemplates.com/

• BRIX Agency - Looking for a hand to design & develop an amazing Webflow website? Get in touch with our amazing team on https://brixagency.com/

24. Buttons Webflow Cloneable Template - BRIX Templates

16 Buttons Components Webflow Template | BRIX Templates

Veza Digital

I've seen a similar button animation on a few sites and thought it was really cool, so I made this for the community!

To change the colours of everything on hover, make sure you edit the animation (both in and out).

Button Line Animation

Moving Line Button Animation Cloneable

Welcome to daily interaction #81.

This button was a lot of fun to create. At first glance it looks like a fairly simple button with a few line animations, but quite a bit goes into creating it. You might think the lines are scaling, but because a few of the lines go in different directions on the hover out animation, I had to place the lines within wrappers and set the wrappers to an overflow of hidden. I then applied ‘move’ animations to each line so I could control from what directions the lines came in from on the different hover states. Scaling the lines does not allow for the transform-origin to be changed on the different hover states, so that is why I chose to use the ‘move’ option instead. There are 6 line wrappers with lines inside of them and they are all placed on different sides of the button with a position of absolute.

Enjoy :).

This button was inspired by the buttons on this website here: https://activetheory.net/lab/neon-tubes

WebDev for You - Daily Interaction #81

WebDev For You - Daily Interaction #81

Hi my gorgeous friends of Webflow,

This project contains a library with 20+ slide button hover animations.

Enjoy and feel free to leave a comment!

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Webflow Button Library

Button Hover effect made with Interaction 2.

button-interaction

button-interaction-1ae9af

A pair of buttons using hover transitions and skew properties.

Button Hover Styles

Buttons Using Skew with Hover Interactions

Google has nailed the Pressed State for buttons in their Google Material Design System, Why? Well, It's subtle for one but more importantly, it gives the right Affordance to what has just happened. After you click you know the click has worked, and in this interaction also adds the added benefit of letting the user know where exactly the click has taken place by creating a ripple effect emanating away from the place where you have clicked.

For more check out https://johnferreira.design/learn

Discover button interaction websites built by the Webflow community

Discover button interaction websites built by the Webflow community