Hello Brilliant People! 👋
Lots of people think that they can 100% count on a frameworks and not care at all for any vanilla code, while in fact I'm writing this small article to share with you a way to create amazing button hover effect by combining both Tailwind CSS and vanilla CSS.
There are things simply not doable with frameworks, So we use vanilla code to make magic happen.
We're going to build a button that has gradient background and I want those colors in my gradient to change when I hover on the button. We will build this 😍👇
Let's get to it without wasting any more time 🚀
1- You have Tailwind installed, right?
- Obviously you should have Tailwind installed in your project. If you don't 👉 🔗 HERE
2- Starting with HTML:
- Here I have HTML template with boilerplate and a script to link to Tailwind CDN and empty body.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gradient Hover Effect</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
// Hi, I'm empty body :(
</body>
</html>
3- Building the button:
- I'm going to create a div and inside it an anchor tag to use it as my button.
- With some basic tailwind code, we're able to center the div and shape the anchor tag.
<body>
<div class="grid place-items-center h-screen">
<a
href="#"
class="font-semibold text-xs rounded-full py-2 px-8 bg-
red-500"
>
I'm a very cool button with a cool hover effect
</a>
</div>
</body>
- The above code will come out like this 👇
4- Making it Gradient:
- We will refer to the 🔗 Gradient BG Tailwind DOCs if we don't know how, but Tailwind makes it super easy and simple.
- We should now remove
bg-red-500and add our code to the anchor tag.
<body>
<div class="grid place-items-center h-screen">
<a
href="#"
class="font-semibold text-xs rounded-full py-2 px-8
bg-gradient-to-r from-purple-600 to-blue-500
hover:bg-gradient-to-bl text-white"
>
I'm a very cool button with a cool hover effect
</a>
</div>
</body>
- This will make our button cool like this 👇
Easy right? But that's not what we want! We want the hover effect to take it's time and to have a cool transition. Here we must use vanilla CSS to make this happen.
5- Using Vanilla CSS:
- Time to refer back to ways of the ancestors and use normal CSS.
- I've created another file called
styles.css. - Added this code 👉
<link rel="stylesheet" href="styles.css" />to the head just below tailwind script. - I used the below code in my
styles.cssfile to force what I want on Tailwind and browser.
.coolButton {
-webkit-transition: background 1s ease-out !important;
-moz-transition: background 1s ease-out !important;
-o-transition: background 1s ease-out !important;
transition: background 1s ease-out !important;
}
.coolButton:hover {
background-position: 315.5px !important;
}
6- Final Touch:
- Now add the
.coolButtonclass name to your anchor tag classes and watch the magic happen.
<body>
<div class="grid place-items-center h-screen">
<a
href="#"
class="coolButton font-semibold text-xs rounded-full py-2
px-8 bg-gradient-to-r from-purple-600 to-blue-500
hover:bg-gradient-to-bl text-white">
I'm a very cool button with a cool hover effect
</a>
</div>
</body>
- And we get what we want 😎
Cool right? That's just an example to encourage everyone to open their mind to find work arounds and new ways to accomplish whatever you have in mind.
If you like the article or you find it helpful please share it to help others :)
Have a good day 🦸♂️🦸♀️
Top comments (0)