DEV Community

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

Posted on

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!