DEV Community

Cover image for Free Tailwind CSS Button Animations
Toma Rares
Toma Rares

Posted on

5 2 2 2 2

Free Tailwind CSS Button Animations

Hi everyone,

These buttons were made using Riva Dashboard Tailwind CSS from Loopple.

Code:

<button class="bg-primary hover:bg-primaryActive text-white text-sm py-2.5 px-5 mr-2 mb-2 rounded-xl shadow-md hover:translate-y-[-2px] transition duration-300">
    Rise
</button>
<button class="bg-danger hover:bg-dangerActive text-white text-sm py-2.5 px-5 mr-2 mb-2 rounded-xl shadow-md hover:scale-105 transition duration-300">
    Scale
</button>
<button class="bg-success hover:bg-successActive text-white text-sm py-2.5 px-5 mr-2 mb-2 rounded-xl shadow-md hover:rotate-3 transition duration-300">
     Rotate to end
</button>
<button class="bg-warning hover:bg-warningActive text-white text-sm py-2.5 px-5 mr-2 mb-2 rounded-xl shadow-md hover:-rotate-3 transition duration-300">
     Rotate to start
</button>
Enter fullscreen mode Exit fullscreen mode

You can also check the full list of components here: Riva Tailwind Dashboard Builder components

Thank you!

Top comments (1)

Collapse
 
fredy profile image
Fredy Andrei

Great component!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay