Collection of 45 Tailwind CSS Modern Buttons

By Faraz - September 10, 2023

Learn how to design 45 modern buttons effortlessly using Tailwind CSS. Elevate your web development game with stunning and responsive buttons.

Join us on Telegram

Collection of 45 Tailwind CSS Modern Buttons.jpg

Read Also responsive 404 error page how to create one using html, css and javascript.png

Creating a Responsive 404 Not Found Page | HTML, CSS, and JavaScript Tutorial

Buttons play a pivotal role in web design, serving as the gateway to user interactions and a significant contributor to a website's overall visual appeal. In this comprehensive guide, we will embark on a journey to explore the art of crafting 45 modern buttons using the incredibly versatile and user-friendly Tailwind CSS framework.

As we delve into the world of button design, we will uncover the myriad benefits of harnessing Tailwind CSS, a tool renowned for its simplicity and efficiency in styling web elements. Whether you are a seasoned developer or just starting your journey in web development and UI/UX design, this tutorial is your gateway to mastering the art of creating sleek and responsive buttons that captivate users and elevate the aesthetics of your web projects.

So, let's dive in and discover how Tailwind CSS can empower you to design modern buttons that leave a lasting impression.

Source Code

Step 1 (HTML Code):

To get started, we will need to create a basic HTML file. In this file, we will include the main structure for our button.

Let me break down the code for you:

1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML used in the document.

2. <html lang="en">: The opening tag for the HTML document with the "lang" attribute set to "en" to indicate that the document is in English.

3. <head>: The head section of the HTML document, which contains meta information and links to external resources.

<title>45 CSS Only Buttons</title>: Sets the title of the webpage displayed in the browser's title bar or tab.
<meta charset="UTF-8" />: Specifies the character encoding of the document as UTF-8, which supports a wide range of characters and symbols.
<meta name="viewport" content="width=device-width" />: Defines the viewport settings to adapt the page's layout to the device's width.
<script src="https://cdn.tailwindcss.com"></script>: Includes an external JavaScript file from the given URL. In this case, it's loading Tailwind CSS, a popular CSS framework.

4. <body class="bg-gray-50">: The body section of the HTML document with a class attribute specifying the background color as gray (CSS class "bg-gray-50").

5. Within the body, there are several sections (marked with comments) that contain different button styles created using CSS. Each section contains a <div> element with a specific button design.

These button designs vary in terms of color, shape, animation, and style. They use various CSS classes and styles to achieve different visual effects, such as gradients, shadows, and hover effects.
Some buttons have icons or symbols inside them.
The buttons also have links (<a href="#_">) with a placeholder href attribute ("#_"). These links do not lead to any actual web pages.

6. At the end of the code, there is an additional button created using a <button> element with a class attribute ("btn"). This button has various CSS styles applied to it, including hover effects and animations.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>45 CSS Only Buttons</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
   <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <body class="bg-gray-50">
      <!-- Section Start -->
      <section class="section pt-28 pb-20" id="home">
        <div class="mx-10">
          <div class="lg:flex justify-center">
            <div class="text-center">
              <div class="text-center">
                <h1 class="text-4xl font-semibold leading-[50px] tracking-wide text-transparent bg-clip-text bg-gradient-to-l from-pink-400 to-blue-600 mb-10">
                  45 CSS Only Modern Button Styles
                </h1>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Section End -->
      <section class="relative pb-20">
        <div class="container">
          <div class="grid md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-6">
            <!-- 1 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-block text-lg group">
                <span class="relative z-10 block px-5 py-3 overflow-hidden font-medium leading-tight text-gray-800 transition-colors duration-300 ease-out border-2 border-gray-900 rounded-lg group-hover:text-white">
                  <span class="absolute inset-0 w-full h-full px-5 py-3 rounded-lg bg-gray-50"></span>
                  <span class="absolute left-0 w-48 h-48 -ml-2 transition-all duration-300 origin-top-right -rotate-90 -translate-x-full translate-y-12 bg-gray-900 group-hover:-rotate-180 ease"></span>
                  <span class="relative">Button</span>
                </span>
                <span class="absolute bottom-0 right-0 w-full h-12 -mb-1 -mr-1 transition-all duration-200 ease-linear bg-gray-900 rounded-lg group-hover:mb-0 group-hover:mr-0" data-rounded="rounded-lg"></span>
              </a>
            </div>
            <!-- 2 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center justify-start py-3 pl-4 pr-12 overflow-hidden font-semibold shadow text-indigo-600 transition-all duration-150 ease-in-out rounded hover:pl-10 hover:pr-6 bg-gray-50 group">
                <span class="absolute bottom-0 left-0 w-full h-1 transition-all duration-150 ease-in-out bg-indigo-600 group-hover:h-full"></span>
                <span class="absolute right-0 pr-4 duration-200 ease-out group-hover:translate-x-12">
                  <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                  </svg>
                </span>
                <span class="absolute left-0 pl-2.5 -translate-x-12 group-hover:translate-x-0 ease-out duration-200">
                  <svg class="w-5 h-5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                  </svg>
                </span>
                <span class="relative w-full text-left transition-colors duration-200 ease-in-out group-hover:text-white">Button</span>
              </a>
            </div>
            <!-- 3 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative px-5 py-2 font-medium text-white group">
                <span class="absolute inset-0 w-full h-full transition-all duration-300 ease-out transform translate-x-0 -skew-x-12 bg-purple-500 group-hover:bg-purple-700 group-hover:skew-x-12"></span>
                <span class="absolute inset-0 w-full h-full transition-all duration-300 ease-out transform skew-x-12 bg-purple-700 group-hover:bg-purple-500 group-hover:-skew-x-12"></span>
                <span class="absolute bottom-0 left-0 hidden w-10 h-20 transition-all duration-100 ease-out transform -translate-x-8 translate-y-10 bg-purple-600 -rotate-12"></span>
                <span class="absolute bottom-0 right-0 hidden w-10 h-20 transition-all duration-100 ease-out transform translate-x-10 translate-y-8 bg-purple-400 -rotate-12"></span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 4  -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="rounded-md px-3.5 py-2 m-1 overflow-hidden relative group cursor-pointer border-2 font-medium border-indigo-600 text-indigo-600 ">
                <span class="absolute w-64 h-0 transition-all duration-300 origin-center rotate-45 -translate-x-20 bg-indigo-600 top-1/2 group-hover:h-64 group-hover:-translate-y-32 ease"></span>
                <span class="relative text-indigo-600 transition duration-300 group-hover:text-white ease">Button</span>
              </a>
            </div>
            <!-- 5 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="px-5 py-2.5 relative rounded group font-medium text-white inline-block">
                <span class="absolute top-0 left-0 w-full h-full rounded opacity-50 filter blur-sm bg-gradient-to-br from-purple-600 to-blue-500"></span>
                <span class="h-full w-full inset-0 absolute mt-0.5 ml-0.5 bg-gradient-to-br filter group-active:opacity-0 rounded opacity-50 from-purple-600 to-blue-500"></span>
                <span class="absolute inset-0 w-full h-full transition-all duration-200 ease-out rounded shadow-xl bg-gradient-to-br filter group-active:opacity-0 group-hover:blur-sm from-purple-600 to-blue-500"></span>
                <span class="absolute inset-0 w-full h-full transition duration-200 ease-out rounded bg-gradient-to-br to-purple-600 from-blue-500"></span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 6 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="px-5 py-2.5 relative rounded group overflow-hidden font-medium bg-white text-purple-600 inline-block">
                <span class="absolute top-0 left-0 flex w-full h-0 mb-0 transition-all duration-200 ease-out transform translate-y-0 bg-purple-600 group-hover:h-full opacity-90"></span>
                <span class="relative group-hover:text-white">Button</span>
              </a>
            </div>
            <!-- 7 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="rounded relative inline-flex group items-center justify-center px-3.5 py-2 m-1 cursor-pointer border-b-4 border-l-2 active:border-purple-600 active:shadow-none shadow-lg bg-gradient-to-tr from-purple-600 to-purple-500 border-purple-700 text-white">
                <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-32 group-hover:h-32 opacity-10"></span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 8 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex overflow-hidden text-white bg-gray-900 rounded group">
                <span class="px-3.5 py-2 text-white bg-purple-500 group-hover:bg-purple-600 flex items-center justify-center">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                  </svg>
                </span>
                <span class="pl-4 pr-5 py-2.5">Button</span>
              </a>
            </div>
            <!-- 9 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center px-12 py-3 overflow-hidden text-lg font-medium text-indigo-600 border-2 border-indigo-600 rounded-full hover:text-white group hover:bg-gray-50">
                <span class="absolute left-0 block w-full h-0 transition-all bg-indigo-600 opacity-100 group-hover:h-full top-1/2 group-hover:top-0 duration-400 ease"></span>
                <span class="absolute right-0 flex items-center justify-start w-10 h-10 duration-300 transform translate-x-full group-hover:translate-x-0 ease">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                  </svg>
                </span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 10 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative px-6 py-3 font-bold text-black group">
                <span class="absolute inset-0 w-full h-full transition duration-300 ease-out transform -translate-x-2 -translate-y-2 bg-red-300 group-hover:translate-x-0 group-hover:translate-y-0"></span>
                <span class="absolute inset-0 w-full h-full border-4 border-black"></span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 11 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative rounded px-5 py-2.5 overflow-hidden group bg-green-500 hover:bg-gradient-to-r hover:from-green-500 hover:to-green-400 text-white hover:ring-2 hover:ring-offset-2 hover:ring-green-400 transition-all ease-out duration-300">
                <span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease"></span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 12 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center justify-center p-4 px-5 py-3 overflow-hidden font-medium text-indigo-600 transition duration-300 ease-out rounded-full shadow-xl group hover:ring-1 hover:ring-purple-500">
                <span class="absolute inset-0 w-full h-full bg-gradient-to-br from-blue-600 via-purple-600 to-pink-700"></span>
                <span class="absolute bottom-0 right-0 block w-64 h-64 mb-32 mr-4 transition duration-500 origin-bottom-left transform rotate-45 translate-x-24 bg-pink-500 rounded-full opacity-30 group-hover:rotate-90 ease"></span>
                <span class="relative text-white">Button</span>
              </a>
            </div>
            <!-- 13 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative px-10 py-3 font-medium text-white transition duration-300 bg-green-400 rounded-md hover:bg-green-500 ease">
                <span class="absolute bottom-0 left-0 h-full -ml-2">
                  <svg viewBox="0 0 487 487" class="w-auto h-full opacity-100 object-stretch" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 .3c67 2.1 134.1 4.3 186.3 37 52.2 32.7 89.6 95.8 112.8 150.6 23.2 54.8 32.3 101.4 61.2 149.9 28.9 48.4 77.7 98.8 126.4 149.2H0V.3z" fill="#FFF" fill-rule="nonzero" fill-opacity=".1"></path>
                  </svg>
                </span>
                <span class="absolute top-0 right-0 w-12 h-full -mr-3">
                  <svg viewBox="0 0 487 487" class="object-cover w-full h-full" xmlns="http://www.w3.org/2000/svg">
                    <path d="M487 486.7c-66.1-3.6-132.3-7.3-186.3-37s-95.9-85.3-126.2-137.2c-30.4-51.8-49.3-99.9-76.5-151.4C70.9 109.6 35.6 54.8.3 0H487v486.7z" fill="#FFF" fill-rule="nonzero" fill-opacity=".1"></path>
                  </svg>
                </span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 14 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative px-5 py-3 overflow-hidden font-medium text-gray-600 bg-white border border-gray-100 rounded-lg shadow-inner group">
                <span class="absolute top-0 left-0 w-0 h-0 transition-all duration-200 border-t-2 border-gray-600 group-hover:w-full ease"></span>
                <span class="absolute bottom-0 right-0 w-0 h-0 transition-all duration-200 border-b-2 border-gray-600 group-hover:w-full ease"></span>
                <span class="absolute top-0 left-0 w-full h-0 transition-all duration-300 delay-200 bg-gray-600 group-hover:h-full ease"></span>
                <span class="absolute bottom-0 left-0 w-full h-0 transition-all duration-300 delay-200 bg-gray-600 group-hover:h-full ease"></span>
                <span class="absolute inset-0 w-full h-full duration-300 delay-300 bg-gray-900 opacity-0 group-hover:opacity-100"></span>
                <span class="relative transition-colors duration-300 delay-200 group-hover:text-white ease">Button</span>
              </a>
            </div>
            <!-- 15 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="box-border relative z-30 inline-flex items-center justify-center w-auto px-8 py-3 overflow-hidden font-bold text-white transition-all duration-300 bg-indigo-600 rounded-md cursor-pointer group ring-offset-2 ring-1 ring-indigo-300 ring-offset-indigo-200 hover:ring-offset-indigo-500 ease focus:outline-none">
                <span class="absolute bottom-0 right-0 w-8 h-20 -mb-8 -mr-5 transition-all duration-300 ease-out transform rotate-45 translate-x-1 bg-white opacity-10 group-hover:translate-x-0"></span>
                <span class="absolute top-0 left-0 w-20 h-8 -mt-1 -ml-12 transition-all duration-300 ease-out transform -rotate-45 -translate-x-1 bg-white opacity-10 group-hover:translate-x-0"></span>
                <span class="relative z-20 flex items-center text-sm">
                  <svg class="relative w-5 h-5 mr-2 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                  </svg>
                  Button
                </span>
              </a>
            </div>
            <!-- 16 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative z-30 inline-flex items-center justify-center w-auto px-8 py-3 overflow-hidden font-bold text-gray-500 transition-all duration-500 border border-gray-200 rounded-md cursor-pointer group ease bg-gradient-to-b from-white to-gray-50 hover:from-gray-50 hover:to-white active:to-white">
                <span class="w-full h-0.5 absolute bottom-0 group-active:bg-transparent left-0 bg-gray-100"></span>
                <span class="h-full w-0.5 absolute bottom-0 group-active:bg-transparent right-0 bg-gray-100"></span>
                Button
              </a>
            </div>
            <!-- 17 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-block px-4 py-2 font-medium group">
                <span class="absolute inset-0 w-full h-full transition duration-200 ease-out transform translate-x-1 translate-y-1 bg-black group-hover:-translate-x-0 group-hover:-translate-y-0"></span>
                <span class="absolute inset-0 w-full h-full bg-white border-2 border-black group-hover:bg-black"></span>
                <span class="relative text-black group-hover:text-white">Button</span>
              </a>
            </div>
            <!-- 18 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center justify-center p-4 px-6 py-3 overflow-hidden font-medium text-indigo-600 transition duration-300 ease-out border-2 border-purple-500 rounded-full shadow-md group">
                <span class="absolute inset-0 flex items-center justify-center w-full h-full text-white duration-300 -translate-x-full bg-purple-500 group-hover:translate-x-0 ease">
                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                  </svg>
                </span>
                <span class="absolute flex items-center justify-center w-full h-full text-purple-500 transition-all duration-300 transform group-hover:translate-x-full ease">Button</span>
                <span class="relative invisible">Button</span>
              </a>
            </div>
            <!-- 19 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative items-center justify-center inline-block p-4 px-5 py-3 overflow-hidden font-medium text-indigo-600 rounded-lg shadow-2xl group">
                <span class="absolute top-0 left-0 w-40 h-40 -mt-10 -ml-3 transition-all duration-700 bg-red-500 rounded-full blur-md ease"></span>
                <span class="absolute inset-0 w-full h-full transition duration-700 group-hover:rotate-180 ease">
                  <span class="absolute bottom-0 left-0 w-24 h-24 -ml-10 bg-purple-500 rounded-full blur-md"></span>
                  <span class="absolute bottom-0 right-0 w-24 h-24 -mr-10 bg-pink-500 rounded-full blur-md"></span>
                </span>
                <span class="relative text-white">Button</span>
              </a>
            </div>
            <!-- 20 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center justify-start px-6 py-3 overflow-hidden font-medium transition-all bg-red-500 rounded-xl group">
                <span class="absolute top-0 right-0 inline-block w-4 h-4 transition-all duration-500 ease-in-out bg-red-700 rounded group-hover:-mr-4 group-hover:-mt-4">
                  <span class="absolute top-0 right-0 w-5 h-5 rotate-45 translate-x-1/2 -translate-y-1/2 bg-white"></span>
                </span>
                <span class="absolute bottom-0 left-0 w-full h-full transition-all duration-500 ease-in-out delay-200 -translate-x-full translate-y-full bg-red-600 rounded-2xl group-hover:mb-12 group-hover:translate-x-0"></span>
                <span class="relative w-full text-left text-white transition-colors duration-200 ease-in-out group-hover:text-white">Button</span>
              </a>
            </div>
            <!-- 21 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="px-5 py-2.5 font-medium bg-blue-100/60 hover:bg-blue-100 hover:text-blue-600 text-blue-500 rounded-lg text-sm">
                Button
              </a>
            </div>
            <!-- 22 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-blue-600 border border-blue-700 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" data-rounded="rounded-md" data-primary="blue-600" data-primary-reset="{}">
                Button
              </a>
            </div>
            <!-- 23 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex items-center px-6 py-3 text-gray-500 bg-gray-100 rounded-md hover:bg-gray-200 hover:text-gray-600">
                Button
              </a>
            </div>
            <!-- 24 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex items-center justify-center px-4 py-2 text-base font-medium leading-6 text-gray-600 whitespace-no-wrap bg-white border border-gray-200 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:shadow-none">
                Button
              </a>
            </div>
            <!-- 25 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex items-center justify-center h-12 px-6 font-medium tracking-wide text-white transition duration-200 bg-gray-900 rounded-lg hover:bg-gray-800 focus:shadow-outline focus:outline-none">
                Button
              </a>
            </div>
            <!-- 26 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-indigo-100 border border-indigo-500 rounded-lg shadow-sm cursor-pointer hover:text-white bg-gradient-to-br from-purple-500 via-indigo-500 to-indigo-500">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 27 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex items-center justify-center w-full px-8 py-4 text-base font-bold leading-6 text-white bg-indigo-600 border border-transparent rounded-full md:w-auto hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600">
                Button
              </a>
            </div>
            <!-- 28 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg text-white bg-green-500 rounded-md hover:bg-green-400 sm:w-auto sm:mb-0" data-primary="green-400" data-rounded="rounded-2xl" data-primary-reset="{}">
                Get Started
                <svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                </svg>
              </a>
            </div>
            <!-- 29 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative px-6 py-3 font-bold text-white rounded-lg group">
                <span class="absolute inset-0 w-full h-full transition duration-300 transform -translate-x-1 -translate-y-1 bg-purple-800 ease opacity-80 group-hover:translate-x-0 group-hover:translate-y-0"></span>
                <span class="absolute inset-0 w-full h-full transition duration-300 transform translate-x-1 translate-y-1 bg-pink-800 ease opacity-80 group-hover:translate-x-0 group-hover:translate-y-0 mix-blend-screen"></span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 30 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center justify-center px-6 py-3 overflow-hidden font-bold text-black hover:text-white rounded-md shadow-2xl group">
                <span class="absolute inset-0 w-full h-full transition duration-300 ease-out opacity-0 bg-gradient-to-br from-pink-600 via-purple-700 to-blue-400 group-hover:opacity-100"></span>
                <!-- Top glass gradient -->
                <span class="absolute top-0 left-0 w-full bg-gradient-to-b from-white to-transparent opacity-5 h-1/3"></span>
                <!-- Bottom gradient -->
                <span class="absolute bottom-0 left-0 w-full h-1/3 bg-gradient-to-t from-white to-transparent opacity-5"></span>
                <!-- Left gradient -->
                <span class="absolute bottom-0 left-0 w-4 h-full bg-gradient-to-r from-white to-transparent opacity-5"></span>
                <!-- Right gradient -->
                <span class="absolute bottom-0 right-0 w-4 h-full bg-gradient-to-l from-white to-transparent opacity-5"></span>
                <span class="absolute inset-0 w-full h-full border border-white rounded-md opacity-10"></span>
                <span class="absolute w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-56 group-hover:h-56 opacity-5"></span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 31 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative p-0.5 inline-flex items-center justify-center font-bold overflow-hidden group rounded-md">
                <span class="w-full h-full bg-gradient-to-br from-[#ff8a05] via-[#ff5478] to-[#ff00c6] group-hover:from-[#ff00c6] group-hover:via-[#ff5478] group-hover:to-[#ff8a05] absolute"></span>
                <span class="relative px-6 py-3 transition-all ease-out bg-gray-900 rounded-md group-hover:bg-opacity-0 duration-400">
                  <span class="relative text-white">Button</span>
                </span>
              </a>
            </div>
            <!-- 32 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center justify-start px-5 py-3 overflow-hidden font-bold rounded-full group">
                <span class="w-32 h-32 rotate-45 translate-x-12 -translate-y-2 absolute left-0 top-0 bg-black opacity-[3%]"></span>
                <span class="absolute top-0 left-0 w-48 h-48 -mt-1 transition-all duration-500 ease-in-out rotate-45 -translate-x-56 -translate-y-24 bg-black opacity-100 group-hover:-translate-x-8"></span>
                <span class="relative w-full text-left text-blbg-black transition-colors duration-200 ease-in-out group-hover:text-gray-200">Button</span>
                <span class="absolute inset-0 border-2 border-blbg-black rounded-full"></span>
              </a>
            </div>
            <!-- 33 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative items-center justify-start inline-block px-5 py-3 overflow-hidden font-medium transition-all shadow bg-blue-600 rounded-full hover:bg-white group">
                <span class="absolute inset-0 border-0 group-hover:border-[25px] ease-linear duration-100 transition-all border-white rounded-full"></span>
                <span class="relative w-full text-left text-white transition-colors duration-200 ease-in-out group-hover:text-blue-600">Button</span>
              </a>
            </div>
            <!-- 34 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center justify-start px-6 py-3 overflow-hidden font-medium transition-all shadow bg-white rounded hover:bg-white group">
                <span class="w-48 h-48 rounded rotate-[-40deg] bg-purple-600 absolute bottom-0 left-0 -translate-x-full ease-out duration-500 transition-all translate-y-full mb-9 ml-9 group-hover:ml-0 group-hover:mb-32 group-hover:translate-x-0"></span>
                <span class="relative w-full text-left text-black transition-colors duration-300 ease-in-out group-hover:text-white">Button</span>
              </a>
            </div>
            <!-- 35 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center justify-center px-6 py-3 text-lg font-medium tracking-tighter text-white bg-transparent shadow rounded-md group">
                <span class="absolute inset-0 w-full h-full mt-1 ml-1 transition-all duration-300 ease-in-out bg-purple-600 rounded-md group-hover:mt-0 group-hover:ml-0"></span>
                <span class="absolute inset-0 w-full h-full bg-white rounded-md "></span>
                <span class="absolute inset-0 w-full h-full transition-all duration-200 ease-in-out delay-100 bg-purple-600 rounded-md opacity-0 group-hover:opacity-100 "></span>
                <span class="relative text-purple-600 transition-colors duration-200 ease-in-out delay-100 group-hover:text-white">Button</span>
              </a>
            </div>
            <!-- 36 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-flex items-center justify-center px-10 py-4 overflow-hidden font-mono font-medium tracking-tighter text-white bg-gray-800 rounded-lg group">
                <span class="absolute w-0 h-0 transition-all duration-500 ease-out bg-green-500 rounded-full group-hover:w-56 group-hover:h-56"></span>
                <span class="absolute inset-0 w-full h-full -mt-1 rounded-lg opacity-30 bg-gradient-to-b from-transparent via-transparent to-gray-700"></span>
                <span class="relative">Button</span>
              </a>
            </div>
            <!-- 37 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex items-center w-full px-5 py-3 mb-3 mr-1 text-base font-semibold text-white no-underline align-middle bg-blue-600 border border-transparent border-solid rounded-md cursor-pointer select-none sm:mb-0 sm:w-auto hover:bg-blue-700 hover:border-blue-700 hover:text-white focus-within:bg-blue-700 focus-within:border-blue-700">
                Button
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
              </a>
            </div>
            <!-- 38 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="relative inline-block w-auto px-6 py-3 overflow-hidden text-base font-semibold text-center shadow text-gray-800 rounded-lg bg-gray-50 hover:text-black hover:bg-white">
                Button
              </a>
            </div>
            <!-- 39 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="px-10 py-4 text-xl font-semibold text-center text-white transition duration-300 rounded-lg hover:from-purple-600 hover:to-pink-600 ease bg-gradient-to-br from-purple-500 to-pink-500 md:w-auto">
                Button
              </a>
            </div>
            <!-- 40 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-flex items-center justify-center h-16 px-10 py-0 text-xl font-semibold text-center text-gray-900 no-underline align-middle transition-all duration-300 ease-in-out bg-transparent border-2 border-gray-600 border-solid rounded-full cursor-pointer select-none hover:text-blue-600 hover:border-blue-600 focus:shadow-xs focus:no-underline">
                Button
              </a>
            </div>
            <!-- 41 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-block py-4 text-xl text-white bg-gray-800 px-7 hover:bg-gray-700 rounded-xl">
                Button
              </a>
            </div>
            <!-- 42 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-block px-5 py-2 mx-auto text-white bg-blue-600 rounded-full hover:bg-blue-700 md:mx-0">
                Button
              </a>
            </div>
            <!-- 43 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="inline-block items-center justify-center px-4 py-2 text-base font-medium leading-6 text-white whitespace-no-wrap bg-sky-500 border-2 border-transparent rounded-full shadow-sm hover:bg-transparent hover:text-sky-500 hover:border-sky-500 focus:outline-none">
                Button
              </a>
            </div>
            <!-- 44 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <a href="#_" class="w-full py-4 text-xl text-center text-white transition-colors duration-300 bg-green-400 rounded-full hover:bg-green-500 ease px-9 md:w-auto">
                Button
              </a>
            </div>
            <!-- 45 -->
            <div class="border w-full h-40 flex items-center justify-center">
              <button class="btn p-4 relative border-0 uppercase text-amber-300 shadow bg-transparent hover:delay-[.5s] transition-all duration-500 hover:text-white before:absolute before:left-0 before:bottom-0 before:h-[2px] before:w-0 before:transition-all before:duration-500 before:bg-amber-300 before:hover:w-full after:absolute after:left-0 after:bottom-0 after:h-0 after:w-full after:transition-all after:duration-500 after:bg-amber-300 after:hover:h-full after:text-white after:-z-10 after:hover:delay-[0.4s]">
                Hover me
              </button>
            </div>
          </div>
        </div><!-- Container End -->
      </section>
  </body>
</html>

Read Also Create Music Streaming App Landing Page HTML & CSS Tutorial.webp

Create Music Streaming App Landing Page: HTML & CSS Tutorial (Source Code)

Step 2 (CSS Code):

/*

 No custom CSS thanks to Tailwind!
 tailwindcss.com

*/

Final Output:

Collection of 45 Tailwind CSS Modern Buttons.gif

Read Also Create a Custom Multiple File Uploader with HTML, CSS, and Javascript.jpg

Create a Custom Multiple File Uploader with HTML, CSS, and JavaScript

Conclusion:

In the ever-evolving landscape of web design and development, mastering the art of button design is a skill that can set you apart. Throughout this guide, we've explored the intricacies of crafting 45 modern buttons with Tailwind CSS, a framework that simplifies the process and empowers you to create buttons that not only look great but also enhance user experiences.

By now, you've learned the basics of Tailwind CSS, how to style buttons, add icons, create captivating hover effects, design for responsiveness, and even infuse animations to make your buttons truly stand out. Moreover, you've gained insights into the best practices for button design, ensuring that your web projects will not only function seamlessly but also look exceptional.

As you continue your web development journey, remember that buttons are more than just clickable elements; they are the bridge between your users and your website's functionality. With the skills you've acquired here, you have the tools to create buttons that not only facilitate user interactions but also make a lasting impression.

Now, armed with the knowledge of modern button design and the power of Tailwind CSS, it's time to embark on your own web development adventures. Apply what you've learned, experiment, and create visually appealing buttons that captivate and engage users on your websites. The world of web design is at your fingertips—go forth and design with confidence!

Credit: Vincent Van Goggles

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: modern buttons, tailwind css, button design, web development, ui/ux design, responsive buttons, creating stylish buttons with tailwind css, button design best practices, tailwind css button customization, responsive web buttons tutorial

End of the article