8 Button Hover Animations Using Tailwind CSS

8 Button Hover Animations Using Tailwind CSS

 Here are 10 different button hover animation examples using Tailwind CSS: 

1. Scale up the button on hover:

<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-transform duration-300 hover:scale-110">Hover me to scale up</button>

2. Rotate the button on hover:

<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-transform duration-300 hover:rotate-2">Hover me to rotate</button>

3. Change the button's color on hover:

<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-colors duration-300 hover:bg-gray-900 hover:text-gray-50">Hover me to change color</button>

4. Grow the button on hover:

<button class="transition-width w-44 rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 duration-300 hover:w-56">Hover me to grow</button>

5. Move the button on hover:

<button class="w-44 rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-transform duration-300 hover:-translate-y-1">Hover me to move</button>

6. Add a shadow to the button on hover:

<button class="w-44 rounded-lg border-2 border-gray-900 bg-white px-4 py-2 font-medium text-gray-900 transition-shadow duration-300 hover:shadow-lg">Hover me to add shadow</button>

7. Change the button text color on hover:

<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-colors duration-300 hover:border-red-600 hover:text-red-600">Hover me to change text color</button>

8. Fade the button on hover:

<button class="rounded-lg border-2 border-gray-900 px-4 py-2 font-medium text-gray-900 transition-opacity duration-300 hover:opacity-50">Hover me to fade in</button>

You can customize these hover animations by using different values for the transition and transform properties, or by using other CSS properties such as color, width, and box-shadow. You can also use the ease-in-out timing function to create a smooth transition effect. 

Demo: https://ankitcodes.com/component/8-different-button-hover-animation-examples