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
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.
<script src="https://cdn.tailwindcss.com"></script>
or Install it according to your tach see Tailwind CSS Website
In my case, I am using plain HTML doc. For quick, I have added tailwind CDN.
<!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.
<div class="bg-yellow-100 h-screen w-full overflow-hidden flex justify-center items-center">
</div>
Output:
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.
<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:
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.
<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>
5. Final code:
<!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
Visit My Portfolio
Happy Coding ✨
Top comments (0)