Hi guys, all right with you?!

Time is tight with many things at work, but I missed writing some articles, seeing the community and new things!

But I'm trying to make my time more organized to do things I like, learn new things, practice and share some interesting things too!

But let's talk about this article! It's about some simple animations on button elements! I saw some sites and I could notice a common thing!

Many sites don't have a simple button animation, it's always just a background and text and that's it!

So I decided to make some simple animations to make the buttons and websites more pleasant for the user experience!

Now let's see it 🥳

🪄 Random Button Animations

Some simple examples with random hover animations:

💥 Animation: Border Effects Animated:

Codepen Link: Here

💥 Animation: Background Rotate Animated:

Codepen Link: Here

💥 Animation: Liquid Button Animated:

Codepen Link: Here

💥 Animation: Button 3D Animated:

Codepen Link: Here

💥 Animation: Background/Text Animated:

Codepen Link: Here

💥 Animation: Transition Text Animated:

Codepen Link: Here

💥 Animation: Scaled Background Animated:

Codepen Link: Here

💥 Animation: Simple Scale Background Animated:

Codepen Link: Here

🪄 Animated Buttons with Simple Lines

Some simple examples with lines animating on hover:

💥 Animation: Bottom Line Animated:

Codepen Link: Here

💥 Animation: Go up Bottom Line Animated:

Codepen Link: Here

💥 Animation: Two Lines Animated:

Codepen Link: Here

💥 Animation: Simple Line Bottom Animated:

Codepen Link: Here

💥 Animation: Two Lines Width Animated:

Codepen Link: Here

And that's all folks! I just wanted to make some simple and easy animations to inspire myself, you and everyone else to want to make animated buttons on hover 🥳

You can see the my Buttons animations collection here

I hope you like it and if you have other examples, please let me know!

If you want follow me on Twitter 🤘

See you guys 🖖🤘