Make a smart button! 😀 using plain HTML5 + Tailwind CSS button with proper hover effects and transitions
Published: 2024-05-13 18:18:46

In this article, we'll create a sleek and interactive Smart Button using plain HTML5 and Tailwind CSS. This Smart Button is perfect for quick user actions, adding a touch of sophistication and functionality to any website. A button plays a key role in providing a smooth user experience for any website. 

View [Live Demo](https://smart-button-three.vercel.app/)

Before we get started, let's take a moment to understand Tailwind CSS. Tailwind CSS is a popular open-source CSS framework that follows a utility-first methodology, offering a wide range of utility classes for styling elements. With Tailwind CSS, we can easily create modern and responsive UI components without writing custom CSS.
 
Now let's get started!

### 1. Install Tailwind CSS:
Make sure you have Tailwind CSS installed. If you don't have you can use it via CDN.

```html
<script src="https://cdn.tailwindcss.com"></script>
```
or Install it according to your tach see [Tailwind CSS Website](https://tailwindcss.com/docs/installation)

In my case, I am using plain HTML doc. For quick, I have added tailwind CDN.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Smart Button</title>
</head>
  <body>
  </body>
</html>
```

### 2. Create a wrapper (optional):
Create a wrapper using div to center the button to make sure that it is easily visible.

```html
<div class="bg-yellow-100 h-screen w-full overflow-hidden flex justify-center items-center">

</div>
```

Output:
![Create a Wrapper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrhsnp804xbkmi67xyfg.png)


### 3. Make the basic HTML structure:
As we know we use HTML to create the structure of websites. We have to make button the structure first.

```html
 <button class="">
<!-- Two span tags to create text slide animation while hovering -->
      <div class="">
        <span class="">Click Now</span>
        <span class="">Click Now</span>
      </div>

<!-- SVG for Right Arrow with its container -->
      <div class="">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow" class="stroke-white">
          <g
            fill="none"
            fill-rule="evenodd"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <path d="M1 7h16M11 1l6 6-6 6"></path>
          </g>
        </svg>
<!-- Div to create background slide animation while hovering -->
        <div class=""></div>
      </div>
<!-- Div to create background slide animation while hovering of the button (root) -->
      <div class=""></div>
    </button>
```

Output: 

![Make the basic HTML structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js4z631sc2803tvm7jcb.png)

### 4. Apply styles on the structure:
Since we are using tailwind CSS and we already have the HTML structure made then we just have to apply the tailwind CSS style to the HTML structure using classes.

```html
<button class="group flex justify-center items-center gap-6 px-12 py-4 bg-purple-600 text-white font-mono font-semibold text-xl relative overflow-hidden rounded-xl border-4 border-black hover:border-purple-600 shadow-[4px_8px_0px_#000] hover:shadow-[0px_0px_0px_#000] transition-all duration-200 uppercase">
      <div class="relative overflow-hidden z-[1] transition-all duration-200">
        <span class="group-hover:translate-y-full inline-block transition-all duration-200">Click Now</span>
        <span class="absolute inset-0 -translate-y-full group-hover:translate-y-0 inline-block transition-all duration-200">Click Now</span>
      </div>

      <div class="w-12 aspect-square rounded-full border-2 border-white group-hover:border-purple-600 flex justify-center items-center bg-purple-600 z-[1] transition-all duration-200 relative overflow-hidden">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow" class="z-[1] stroke-white group-hover:stroke-purple-600 transition-all duration-200">
          <g
            fill="none"
            fill-rule="evenodd"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <path d="M1 7h16M11 1l6 6-6 6"></path>
          </g>
        </svg>
        <div class="absolute inset-0 bg-white rounded-full translate-y-full group-hover:translate-y-0 transition-transform duration-200 z-0"></div>
      </div>
      <div class="absolute inset-0 bg-black -translate-y-full group-hover:translate-y-0 transition-transform duration-200 z-0"></div>
    </button>
```


![Apply styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqtecwgak4hopxqwutdg.png)


### 5. Final code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Smart Button</title>
</head>
<body>
  <div class="bg-yellow-100 h-screen w-full overflow-hidden flex justify-center items-center">

    <button class="group flex justify-center items-center gap-6 px-12 py-4 bg-purple-600 text-white font-mono font-semibold text-xl relative overflow-hidden rounded-xl border-4 border-black hover:border-purple-600 shadow-[4px_8px_0px_#000] hover:shadow-[0px_0px_0px_#000] transition-all duration-200 uppercase">
      <div class="relative overflow-hidden z-[1] transition-all duration-200">
        <span class="group-hover:translate-y-full inline-block transition-all duration-200">Click Now</span>
        <span class="absolute inset-0 -translate-y-full group-hover:translate-y-0 inline-block transition-all duration-200">Click Now</span>
      </div>

      <div class="w-12 aspect-square rounded-full border-2 border-white group-hover:border-purple-600 flex justify-center items-center bg-purple-600 z-[1] transition-all duration-200 relative overflow-hidden">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" id="arrow" class="z-[1] stroke-white group-hover:stroke-purple-600 transition-all duration-200">
          <g
            fill="none"
            fill-rule="evenodd"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
          >
            <path d="M1 7h16M11 1l6 6-6 6"></path>
          </g>
        </svg>
        <div class="absolute inset-0 bg-white rounded-full translate-y-full group-hover:translate-y-0 transition-transform duration-200 z-0"></div>
      </div>
      <div class="absolute inset-0 bg-black -translate-y-full group-hover:translate-y-0 transition-transform duration-200 z-0"></div>
    </button>

  </div>
</body>
</html>
```

### GitHub Repo [Smart Button](https://github.com/friyad/smart-button)
<br>
### Visit [My Portfolio](https://www.friyad.site)
<br><br>
Happy Coding ✨