I'm trying to style a button with tailwind on Next.js. I want the button background color to change on hover.
I'm trying to style a button doing something like this
<button className="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:bg-slate-200">
Hire Me
</button>
But hover is not changing the background color.
Tailwind bg-gradient-* class sets a linear gradient (in this case) like the following CSS code
background-image: linear-gradient(to bottom right, #67e8f9, #3B82F6, #8B5CF6);
since hover:bg-slate-200 only affects the background color, the background-image is unaltered. you have to modify the background-image to get the desired result
override the background-image property by setting hover:bg-none
first
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"> </script>
</head>
<body>
<button class="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:bg-none hover:bg-slate-200">
Hire Me
</button>
<! exactly reversing -->
<button class="rounded-full bg-gradient-to-br from-cyan-300 via-blue-500 to-purple-500 hover:from-slate-200 hover:via-slate-200 hover:to-slate-200">
Hire Me
</button>
</body>
</html>