How to change the background color of a button on hover in Tailwind CSS ?

Last Updated : 04 Mar, 2024

Tailwind CSS, a utility-first CSS framework, provides a highly efficient way to style web pages. Among its many utilities, Tailwind offers a basic and powerful way to apply the hover effect to the buttons.

This feature enhances the visual appeal of buttons and increases interactivity. We will explore some of the designs and colors we can modify while hovering a button.

We will discuss the following two approaches to change background color of a button on hover in Tailwind CSS

Table of Content

Using Tailwind CSS hover
Using TailwindCSS hover with animation

Approach 1: Using Tailwind CSS hover

Integrate Tailwind CSS via CDN links in an HTML file to create a webpage with a single centered button. The button has a blue background color that changes to green when hovered over. It uses Tailwind CSS for styling, ensuring responsiveness and consistent design.

Example: Illustration of changing the background color of a button on hover Using TailwindCSS hover

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Centered Button with Hover Effect in Tailwind CSS</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="flex justify-center items-center
             h-screen bg-gray-100">
    <div>
        <button class="bg-blue-500 hover:bg-green-500 
                       text-white font-bold py-2 px-4 rounded">
            Hover Me
        </button>
    </div>
</body>
 
</html>

Output:

Output

Approach 2: Using TailwindCSS hover with animation

Integrate Tailwind CSS via CDN links in an HTML file to create a webpage with two sets of buttons, each with unique hover effects, styled using Tailwind CSS classes. The buttons in the first set show various transformations like scaling and rotation on hover, while the buttons in the second set demonstrate color changes and additional elements appearing on hover. The layout is organized using Flexbox, with buttons arranged in rows and columns

Example: Illustration of changing the background color of a button on hover Using TailwindCSS hover with animation

HTML

<!doctype html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="flex h-screen flex-col items-center justify-center gap-10">
    <div class="flex gap-4">
        <button class="relative h-12 w-40 overflow-hidden border 
                       border-indigo-600 text-indigo-600 shadow-2xl
                       transition-all duration-200 before:absolute 
                       before:bottom-0 before:left-0 before:right-0
                       before:top-0 before:m-auto before:h-0 before:w-0
                       before:rounded-sm before:bg-indigo-600 
                       before:duration-300 before:ease-out 
                       hover:text-white hover:shadow-indigo-600 
                       hover:before:h-40 hover:before:w-40 
                       hover:before:opacity-80">
            <span class="relative z-10">Center Hover</span>
        </button>
 
        <button class="before:ease relative h-12 w-40 overflow-hidden
                       border border-black shadow-2xl before:absolute
                       before:left-0 before:-ml-2 before:h-48 
                       before:w-48 before:origin-top-right 
                       before:-translate-x-full before:translate-y-12
                       before:-rotate-90 before:bg-gray-900 
                       before:transition-all before:duration-300 
                       hover:text-white hover:shadow-black 
                       hover:before:-rotate-180">
            <span class="relative z-10">Slide hover</span>
        </button>
 
        <button class="before:ease relative h-12 w-40 overflow-hidden
                       border border-blue-500 text-blue-500 shadow-2xl
                       transition-all before:absolute before:top-1/2 
                       before:h-0 before:w-64 before:origin-center 
                       before:-translate-x-20 before:rotate-45 
                       before:bg-blue-500 before:duration-300 
                       hover:text-white hover:shadow-blue-500 
                       hover:before:h-64 hover:before:-translate-y-32">
            <span class="relative z-10">Skew curtain</span>
        </button>
        <button class="relative flex h-12 w-40 items-center 
                       justify-center overflow-hidden bg-gray-800
                       text-white shadow-2xl transition-all 
                       before:absolute before:h-0 before:w-0 
                       before:rounded-full before:bg-orange-600
                       before:duration-500 before:ease-out 
                       hover:shadow-orange-600 hover:before:h-56
                       hover:before:w-56">
            <span class="relative z-10">Circle hover</span>
        </button>
    </div>
 
    <div class="flex gap-4">
        <button class="text-red hover:before:bg-red border 
                       border-red-500 relative h-12 w-40 
                       overflow-hidden bg-white px-3 text-red-500
                       shadow-2xl transition-all before:absolute 
                       before:bottom-0 before:left-0 before:top-0
                       before:z-0 before:h-full before:w-0 
                       before:bg-red-500 before:transition-all 
                       before:duration-500 hover:text-white 
                       hover:shadow-red-500 hover:before:left-0 
                       hover:before:w-full">
            <span class="relative z-10">Swipe</span>
        </button>
 
        <button class="relative h-12 w-40 overflow-hidden border
                       border-pink-400 bg-white text-pink-400 
                       shadow-2xl transition-all before:absolute
                       before:left-0 before:top-0 before:h-full
                       before:w-0 before:duration-500 after:absolute
                       after:right-0 after:top-0 after:h-full after:w-0
                       after:duration-500 hover:text-white 
                       hover:shadow-pink-400 hover:before:w-2/4 
                       hover:before:bg-pink-400 hover:after:w-2/4
                       hover:after:bg-pink-400">
            <span class="relative z-10">Curtain</span>
        </button>
 
        <button class="relative h-12 w-40 overflow-hidden border
                       border-green-900 bg-white text-green-900 
                       shadow-2xl transition-all before:absolute
                       before:left-0 before:right-0 before:top-0
                       before:h-0 before:w-full before:bg-green-900
                       before:duration-500 after:absolute 
                       after:bottom-0 after:left-0 after:right-0
                       after:h-0 after:w-full after:bg-green-900
                       after:duration-500 hover:text-white
                       hover:shadow-green-900 hover:before:h-2/4
                       hover:after:h-2/4">
            <span class="relative z-10">Smoosh</span>
        </button>
 
        <button class="group relative min-h-12 w-40 overflow-hidden
                       border border-purple-500 bg-white 
                       text-purple-500 shadow-2xl transition-all
                       before:absolute before:left-0 before:top-0
                       before:h-0 before:w-1/4 before:bg-purple-500
                       before:duration-500 after:absolute 
                       after:bottom-0 after:right-0 after:h-0 
                       after:w-1/4 after:bg-purple-500 after:duration-500
                       hover:text-white hover:before:h-full 
                       hover:after:h-full">
            <span class="top-0 flex h-full w-full items-center 
                         justify-center before:absolute before:bottom-0
                         before:left-1/4 before:z-0 before:h-0 before:w-1/4
                         before:bg-purple-500 before:duration-500 
                         after:absolute after:right-1/4 after:top-0
                         after:z-0 after:h-0 after:w-1/4 after:bg-purple-500
                         after:duration-500 hover:text-white 
                         group-hover:before:h-full group-hover:after:h-full">
              </span>
            <span class="absolute bottom-0 left-0 right-0 top-0 z-10 
                         flex h-full w-full items-center justify-center
                         group-hover:text-white">
              Alternate
              </span>
        </button>
    </div>
</body>
 
</html>