Simple Button Animations with CSS. No double content. Respects Touch Devices. Works as <a> and <button> tag*.

Webflow animations aren't fully accessible at the moment, as "reduce motion" settings don't affect them.

They also use jQuery, adding unnecessary code for simple animations, making them less performant. If you can do it in CSS, it's a better choice for smoother performance.

It's common to see Webflow Animations combined with GSAP, but having two animation libraries can bloat and slow down your project. Stick to one for better performance.

You can clone the site in Webflow and check out the styles there.

At the top, there's a CSS embed labeled global-button-css containing global styles for all buttons. Before each button, there's a CSS embed with the button’s name, containing its specific styles. All other styles are set within Webflow.

Simply rebuild the button using your own class names and styles. You can also inspect the button using Developer Tools.

Yes! I will create new ones from time to time. Follow to see more.

There will be the same with form elements (inputs, checkboxes, radio buttons). I'm currently working on that.

Sure! Write me on LinkedIn or x.com. I will see if that fits here.

I've been using .btn-primary since 10 years now. I can't see it anymore 🫠

It often happened that .btn-primary had to be switched to .btn-secondary, and so on.

With .button-default, you can simply use helper classes for different states, like .is-black, .is-yellow, or .is-outlined..

I could have done that, but that's not how you learn something. Web Development is not about copy and paste things. Try rebuilding it in your own way. Experiment with timings, easing, colors, fonts, and more. Make it your own.

Just right click on the link, convert to custom element. And there switch from div to button. Don't forget to add type="button".

I like to keep the code clean and minimal. If you want to use the styles, you should run it through a tool, for example, here. This will add the necessary prefixes.