How to change the background color of a button on hover in Tailwind CSS ?
Last Updated :
23 Jul, 2025
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
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:
OutputApproach 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/3.4.16"></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:
Similar Reads
How to Change the Border Color on Hover in CSS ? Border color in CSS defines the color of an element’s border. You can change the border color on hover using the :hover pseudo-class, allowing you to modify the border’s appearance when a user hovers over the element. Using CSS hover Pseudo ClassThe hover pseudo-class in CSS is a powerful tool that
1 min read
How to change background color when hover over li elements using CSS ? In this article, we will see how to change the background color of li (list item) on hover using CSS.The hover effect may be used to indicate interactivity or might just be there for aesthetic purposes, like highlighting different items in case of a list. Hover event can be styled using the :hover p
2 min read
How to Change the Color of Link on Hover using CSS ? Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU
2 min read
How To Make A Button Linear Gradient Color Border In Tailwind CSS? Creating visually appealing buttons can significantly enhance the user interface of your web application. One popular design trend is the use of linear gradient borders. In this article, we'll explore how to make a button with a linear gradient color border using Tailwind CSS.A button with a linear
2 min read
How to Change the Underline Color in Tailwind CSS ? The Tailwind underline class adds an underline to the text, and the decoration-color class changes the color of the text-decoration property. Both classes can be used together to add an underline and color to the text. Syntax: The syntax for the tailwind underline and decoration-color classes is as
3 min read
How to Change the Color of Button on Click ? Sometimes, on a web page, when a user clicks a button, it gets difficult to understand whether the button was clicked or not. In such cases, you can change the background color of the button to indicate that the button is clicked. Changing the color of a button when it's clicked can make your websit
4 min read