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

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

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/[email protected]/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:

Animation

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>

Output:


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
Design a Inductor Value Calculator in Tailwind CSS Design a Inductor Value Calculator in Tailwind CSS
Design a Personal Loan Calculator in Tailwind CSS Design a Personal Loan Calculator in Tailwind CSS
Create an Animated Social Media Icons in React and Tailwind CSS Create an Animated Social Media Icons in React and Tailwind CSS
Design a Retirement Age Calculator in Tailwind CSS Design a Retirement Age Calculator in Tailwind CSS
How to Center an Image Vertically and Horizontally ? How to Center an Image Vertically and Horizontally ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 14



 

Horje