DO MAGIC with Tailwind and Vanilla CSS

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-500 and add our code to the anchor tag. ```

<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>

- This will make our button cool like this 👇 
![Tailwind Gradient button with hover effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gsd5awwxxh6pfnspftw.gif)

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.css` file 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 `.coolButton` class name to your anchor tag classes and watch the magic happen.

  <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>

- And we get what we want 😎
![Gradient button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yoksi4togz7vc7dzi4t6.gif)

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 🦸‍♂️🦸‍♀️

Blog

DO MAGIC with Tailwind and Vanilla CSS

Mostafa Said

Hello Brilliant People! 👋

1- You have Tailwind installed, right?

2- Starting with HTML:

3- Building the button:

4- Making it Gradient:

Join Our Newsletter. No Spam, Only the good stuff.

Related