Tailwind CSS Buttons - Create Beautiful Buttons with Tailwind CSS Tutorial | web-beast.com

Tailwind CSS Buttons - Create Beautiful Buttons with Tailwind CSS Tutorial

Basic Button

 <h2 class="text-2xl font-bold mb-8">Basic Button</h2>

    <!-- ***********************start*********************** -->

    <button class="bg-indigo-500 text-white p-4 rounded text-transform: capitalize">button</button>

    <button class="bg-gray-500 text-white p-4 rounded text-transform: capitalize">Gray Button</button>

    <button class="bg-red-500 text-white p-4 rounded text-transform: capitalize"> Red Button</button>

    <button class="bg-yellow-500 text-white p-4 rounded text-transform: capitalize">yellow Button</button>

    <button class="bg-green-500 text-white p-4 rounded text-transform: capitalize">green Button</button>

    <button class="bg-blue-500 text-white p-4 rounded text-transform: capitalize">blue Button</button>

    <button class="bg-purple-500 text-white p-4 rounded text-transform: capitalize">purple Button</button>

    <button class="bg-pink-500 text-white p-4 rounded text-transform: capitalize">pink Button</button>

    <!-- ***********************end*********************** -->

Outlined Button

    <!-- ***********************end*********************** -->

    <h2 class="text-2xl font-bold mt-8 mb-4 ">Outlined Button</h2>

    <!-- ***********************start*********************** -->

    <button class="bg-white text-indigo-500 border border-indigo-500 p-4 rounded">Button</button>

    <button class="bg-white text-gray-500 border border-gray-500 p-4 rounded">gray Button</button>

    <button class="bg-white text-red-500 border border-red-500 p-4 rounded">red Button</button>

    <button class="bg-white text-yellow-500 border border-yellow-500 p-4 rounded">yellow Button</button>

    <button class="bg-white text-green-500 border border-green-500 p-4 rounded">green Button</button>

    <button class="bg-white text-blue-500 border border-blue-500 p-4 rounded">blue Button</button>

    <button class="bg-white text-purple-500 border border-purple-500 p-4 rounded">purple Button</button>

    <button class="bg-white text-pink-500 border border-pink-500 p-4 rounded">pink Button</button>

Ghost Button

 <!-- ***********************end*********************** -->

    <h2 class="text-2xl font-bold mt-8 mb-4 ">Ghost Button</h2>

    <!-- ***********************start*********************** -->

    <button class="bg-transparent text-indigo-500 border border-indigo-500 p-4 rounded">Button</button>

    <button class="bg-transparent text-gray-500 border border-gray-500 p-4 rounded">Button</button>

    <button class="bg-transparent text-red-500 border border-red-500 p-4 rounded">Button</button>

    <button class="bg-transparent text-yellow-500 border border-yellow-500 p-4 rounded">Button</button>

    <button class="bg-transparent text-green-500 border border-green-500 p-4 rounded">Button</button>

    <button class="bg-transparent text-blue-500 border border-blue-500 p-4 rounded">Button</button>

    <button class="bg-transparent text-purple-500 border border-purple-500 p-4 rounded">Button</button>

    <button class="bg-transparent text-pink-500 border border-pink-500 p-4 rounded">Button</button>

    <!-- ***********************end*********************** -->

Pill Button

   <!-- ***********************end*********************** -->

    <h2 class="text-2xl font-bold mt-8 mb-4 ">Pill Button</h2>

    <!-- ***********************start*********************** -->

    <button class="bg-indigo-500 text-white p-2 rounded-full">Button</button>

    <button class="bg-gray-500 text-white p-2 rounded-full">Button</button>

    <button class="bg-red-500 text-white p-2 rounded-full">Button</button>

    <button class="bg-yellow-500 text-white p-2 rounded-full">Button</button>

    <button class="bg-green-500 text-white p-2 rounded-full">Button</button>

    <button class="bg-blue-500 text-white p-2 rounded-full">Button</button>

    <button class="bg-purple-500 text-white p-2 rounded-full">Button</button>

    <button class="bg-pink-500 text-white p-2 rounded-full">Button</button>

    <!-- ***********************end*********************** -->

Square Button

<!-- ***********************end*********************** -->

    <h2 class="text-2xl font-bold mt-8 mb-4 ">Square Button</h2>

    <!-- ***********************start*********************** -->

    <button class="bg-indigo-500 text-white p-4 rounded-lg">Button</button>

    <button class="bg-gray-500 text-white p-4 rounded-lg">Button</button>

    <button class="bg-red-500 text-white p-4 rounded-lg">Button</button>

    <button class="bg-yellow-500 text-white p-4 rounded-lg">Button</button>

    <button class="bg-green-500 text-white p-4 rounded-lg">Button</button>

    <button class="bg-blue-500 text-white p-4 rounded-lg">Button</button>

    <button class="bg-purple-500 text-white p-4 rounded-lg">Button</button>

    <button class="bg-pink-500 text-white p-4 rounded-lg">Button</button>

    <!-- ***********************end*********************** -->

Icon Button

 <!-- ***********************start*********************** -->

    <button class="bg-indigo-500 text-white p-4 rounded-full">

      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

        <path

          d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" />

      </svg>

    </button>

    <button class="bg-gray-500 text-white p-4 rounded-full">

      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

        <path

          d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" />

      </svg>

    </button>

    <button class="bg-red-500 text-white p-4 rounded-full">

      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

        <path

          d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" />

      </svg>

    </button>

    <button class="bg-yellow-500 text-white p-4 rounded-full">

      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

        <path

          d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" />

      </svg>

    </button>

    <button class="bg-green-500 text-white p-4 rounded-full">

      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

        <path

          d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" />

      </svg>

    </button>

    <button class="bg-blue-500 text-white p-4 rounded-full">

      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

        <path

          d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" />

      </svg>

    </button>

    <button class="bg-purple-500 text-white p-4 rounded-full">

      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

        <path

          d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" />

      </svg>

    </button>

    <button class="bg-pink-500 text-white p-4 rounded-full">

      <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

        <path

          d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" />

      </svg>

    </button>

    <!-- ***********************end*********************** -->

Large Button

 <h2 class="text-2xl font-bold mt-8 mb-4 ">Large Button</h2>

    <!-- ***********************start*********************** -->

    <button class="bg-indigo-500 text-white p-6 rounded-lg text-lg">indigo Button</button>

    <button class="bg-gray-500 text-white p-6 rounded-lg text-lg">gray Button</button>

    <button class="bg-red-500 text-white p-6 rounded-lg text-lg">red Button</button>

    <button class="bg-yellow-500 text-white p-6 rounded-lg text-lg">yellow Button</button>

    <button class="bg-green-500 text-white p-6 rounded-lg text-lg">green Button</button>

    <button class="bg-blue-500 text-white p-6 rounded-lg text-lg">blue Button</button>

    <button class="bg-purple-500 text-white p-6 rounded-lg text-lg">purple Button</button>

    <button class="bg-pink-500 text-white p-6 rounded-lg text-lg">pink Button</button>

    <!-- ***********************end*********************** -->

Loading Button

  <h2 class="text-2xl font-bold mt-8 mb-4 ">Loading Button</h2>

    <!-- ***********************start*********************** -->

    <button class="bg-indigo-500 text-white p-4 rounded relative">

      <span class="spinner inline-block">

        <span class="bounce-1 bg-white"></span>

        <span class="bounce-2 bg-white"></span>

        <span class="bounce-3 bg-white"></span>

      </span>

      <span class="button-text">Button</span>

    </button>

    <button class="bg-gray-500 text-white p-4 rounded relative">

      <span class="spinner inline-block">

        <span class="bounce-1 bg-white"></span>

        <span class="bounce-2 bg-white"></span>

        <span class="bounce-3 bg-white"></span>

      </span>

      <span class="button-text">Button</span>

    </button>

    <button class="bg-red-500 text-white p-4 rounded relative">

      <span class="spinner inline-block">

        <span class="bounce-1 bg-white"></span>

        <span class="bounce-2 bg-white"></span>

        <span class="bounce-3 bg-white"></span>

      </span>

      <span class="button-text">Button</span>

    </button>

    <button class="bg-yellow-500 text-white p-4 rounded relative">

      <span class="spinner inline-block">

        <span class="bounce-1 bg-white"></span>

        <span class="bounce-2 bg-white"></span>

        <span class="bounce-3 bg-white"></span>

      </span>

      <span class="button-text">Button</span>

    </button>

    <button class="bg-green-500 text-white p-4 rounded relative">

      <span class="spinner inline-block">

        <span class="bounce-1 bg-white"></span>

        <span class="bounce-2 bg-white"></span>

        <span class="bounce-3 bg-white"></span>

      </span>

      <span class="button-text">Button</span>

    </button>

    <button class="bg-blue-500 text-white p-4 rounded relative">

      <span class="spinner inline-block">

        <span class="bounce-1 bg-white"></span>

        <span class="bounce-2 bg-white"></span>

        <span class="bounce-3 bg-white"></span>

      </span>

      <span class="button-text">Button</span>

    </button>

    <button class="bg-purple-500 text-white p-4 rounded relative">

      <span class="spinner inline-block">

        <span class="bounce-1 bg-white"></span>

        <span class="bounce-2 bg-white"></span>

        <span class="bounce-3 bg-white"></span>

      </span>

      <span class="button-text">Button</span>

    </button>

    <button class="bg-pink-500 text-white p-4 rounded relative">

      <span class="spinner inline-block">

        <span class="bounce-1 bg-white"></span>

        <span class="bounce-2 bg-white"></span>

        <span class="bounce-3 bg-white"></span>

      </span>

      <span class="button-text">Button</span>

    </button>

    <!-- ***********************end*********************** -->

Disabled Button

<button class="bg-indigo-500 text-white p-4 rounded cursor-not-allowed" disabled>indigo Button</button>

<button class="bg-gray-500 text-white p-4 rounded cursor-not-allowed" disabled>gray Button</button>

<button class="bg-red-500 text-white p-4 rounded cursor-not-allowed" disabled>red Button</button>

<button class="bg-yellow-500 text-white p-4 rounded cursor-not-allowed" disabled>yellow Button</button>

<button class="bg-green-500 text-white p-4 rounded cursor-not-allowed" disabled>green Button</button>

<button class="bg-blue-500 text-white p-4 rounded cursor-not-allowed" disabled>blue Button</button>

<button class="bg-purple-500 text-white p-4 rounded cursor-not-allowed" disabled>purple Button</button>

<button class="bg-pink-500 text-white p-4 rounded cursor-not-allowed" disabled>pink Button</button>

Link Button

<!-- ***********************start*********************** -->

<a href="#" class="bg-indigo-500 text-white p-4 rounded hover:bg-indigo-600"> Button</a>

<a href="#" class="bg-gray-500 text-white p-4 rounded hover:bg-gray-600"> Button</a>

<a href="#" class="bg-gray-500 text-white p-4 rounded hover:bg-gray-600"> Button</a>

<a href="#" class="bg-yellow-500 text-white p-4 rounded hover:bg-yellow-600"> Button</a>

<a href="#" class="bg-green-500 text-white p-4 rounded hover:bg-green-600"> Button</a>

<a href="#" class="bg-blue-500 text-white p-4 rounded hover:bg-blue-600"> Button</a>

<a href="#" class="bg-purple-500 text-white p-4 rounded hover:bg-purple-600"> Button</a>

<a href="#" class="bg-pink-500 text-white p-4 rounded hover:bg-pink-600"> Button</a>

<!-- ***********************end*********************** -->

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <title>Tailwind HTML Template</title> </head> <body class="bg-gray-100 h-screen"> <header class="bg-white p-6"> <h1 class="text-2xl font-bold">Tailwind HTML Template</h1> </header> <main class="p-6"> <h2 class="text-2xl font-bold mb-8">Basic Button</h2> <!-- ***********************start*********************** --> <button class="bg-indigo-500 text-white p-4 rounded text-transform: capitalize">button</button> <button class="bg-gray-500 text-white p-4 rounded text-transform: capitalize">Gray Button</button> <button class="bg-red-500 text-white p-4 rounded text-transform: capitalize"> Red Button</button> <button class="bg-yellow-500 text-white p-4 rounded text-transform: capitalize">yellow Button</button> <button class="bg-green-500 text-white p-4 rounded text-transform: capitalize">green Button</button> <button class="bg-blue-500 text-white p-4 rounded text-transform: capitalize">blue Button</button> <button class="bg-purple-500 text-white p-4 rounded text-transform: capitalize">purple Button</button> <button class="bg-pink-500 text-white p-4 rounded text-transform: capitalize">pink Button</button> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Outlined Button</h2> <!-- ***********************start*********************** --> <button class="bg-white text-indigo-500 border border-indigo-500 p-4 rounded">Button</button> <button class="bg-white text-gray-500 border border-gray-500 p-4 rounded">gray Button</button> <button class="bg-white text-red-500 border border-red-500 p-4 rounded">red Button</button> <button class="bg-white text-yellow-500 border border-yellow-500 p-4 rounded">yellow Button</button> <button class="bg-white text-green-500 border border-green-500 p-4 rounded">green Button</button> <button class="bg-white text-blue-500 border border-blue-500 p-4 rounded">blue Button</button> <button class="bg-white text-purple-500 border border-purple-500 p-4 rounded">purple Button</button> <button class="bg-white text-pink-500 border border-pink-500 p-4 rounded">pink Button</button> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Ghost Button</h2> <!-- ***********************start*********************** --> <button class="bg-transparent text-indigo-500 border border-indigo-500 p-4 rounded">Button</button> <button class="bg-transparent text-gray-500 border border-gray-500 p-4 rounded">Button</button> <button class="bg-transparent text-red-500 border border-red-500 p-4 rounded">Button</button> <button class="bg-transparent text-yellow-500 border border-yellow-500 p-4 rounded">Button</button> <button class="bg-transparent text-green-500 border border-green-500 p-4 rounded">Button</button> <button class="bg-transparent text-blue-500 border border-blue-500 p-4 rounded">Button</button> <button class="bg-transparent text-purple-500 border border-purple-500 p-4 rounded">Button</button> <button class="bg-transparent text-pink-500 border border-pink-500 p-4 rounded">Button</button> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Pill Button</h2> <!-- ***********************start*********************** --> <button class="bg-indigo-500 text-white p-2 rounded-full">Button</button> <button class="bg-gray-500 text-white p-2 rounded-full">Button</button> <button class="bg-red-500 text-white p-2 rounded-full">Button</button> <button class="bg-yellow-500 text-white p-2 rounded-full">Button</button> <button class="bg-green-500 text-white p-2 rounded-full">Button</button> <button class="bg-blue-500 text-white p-2 rounded-full">Button</button> <button class="bg-purple-500 text-white p-2 rounded-full">Button</button> <button class="bg-pink-500 text-white p-2 rounded-full">Button</button> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Square Button</h2> <!-- ***********************start*********************** --> <button class="bg-indigo-500 text-white p-4 rounded-lg">Button</button> <button class="bg-gray-500 text-white p-4 rounded-lg">Button</button> <button class="bg-red-500 text-white p-4 rounded-lg">Button</button> <button class="bg-yellow-500 text-white p-4 rounded-lg">Button</button> <button class="bg-green-500 text-white p-4 rounded-lg">Button</button> <button class="bg-blue-500 text-white p-4 rounded-lg">Button</button> <button class="bg-purple-500 text-white p-4 rounded-lg">Button</button> <button class="bg-pink-500 text-white p-4 rounded-lg">Button</button> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Icon Button</h2> <!-- ***********************start*********************** --> <button class="bg-indigo-500 text-white p-4 rounded-full"> <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" /> </svg> </button> <button class="bg-gray-500 text-white p-4 rounded-full"> <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" /> </svg> </button> <button class="bg-red-500 text-white p-4 rounded-full"> <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" /> </svg> </button> <button class="bg-yellow-500 text-white p-4 rounded-full"> <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" /> </svg> </button> <button class="bg-green-500 text-white p-4 rounded-full"> <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" /> </svg> </button> <button class="bg-blue-500 text-white p-4 rounded-full"> <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" /> </svg> </button> <button class="bg-purple-500 text-white p-4 rounded-full"> <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" /> </svg> </button> <button class="bg-pink-500 text-white p-4 rounded-full"> <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm1-9h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H9a1 1 0 0 1 0-2h2V9a1 1 0 0 1 2 0v2z" /> </svg> </button> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Large Button</h2> <!-- ***********************start*********************** --> <button class="bg-indigo-500 text-white p-6 rounded-lg text-lg">indigo Button</button> <button class="bg-gray-500 text-white p-6 rounded-lg text-lg">gray Button</button> <button class="bg-red-500 text-white p-6 rounded-lg text-lg">red Button</button> <button class="bg-yellow-500 text-white p-6 rounded-lg text-lg">yellow Button</button> <button class="bg-green-500 text-white p-6 rounded-lg text-lg">green Button</button> <button class="bg-blue-500 text-white p-6 rounded-lg text-lg">blue Button</button> <button class="bg-purple-500 text-white p-6 rounded-lg text-lg">purple Button</button> <button class="bg-pink-500 text-white p-6 rounded-lg text-lg">pink Button</button> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Loading Button</h2> <!-- ***********************start*********************** --> <button class="bg-indigo-500 text-white p-4 rounded relative"> <span class="spinner inline-block"> <span class="bounce-1 bg-white"></span> <span class="bounce-2 bg-white"></span> <span class="bounce-3 bg-white"></span> </span> <span class="button-text">Button</span> </button> <button class="bg-gray-500 text-white p-4 rounded relative"> <span class="spinner inline-block"> <span class="bounce-1 bg-white"></span> <span class="bounce-2 bg-white"></span> <span class="bounce-3 bg-white"></span> </span> <span class="button-text">Button</span> </button> <button class="bg-red-500 text-white p-4 rounded relative"> <span class="spinner inline-block"> <span class="bounce-1 bg-white"></span> <span class="bounce-2 bg-white"></span> <span class="bounce-3 bg-white"></span> </span> <span class="button-text">Button</span> </button> <button class="bg-yellow-500 text-white p-4 rounded relative"> <span class="spinner inline-block"> <span class="bounce-1 bg-white"></span> <span class="bounce-2 bg-white"></span> <span class="bounce-3 bg-white"></span> </span> <span class="button-text">Button</span> </button> <button class="bg-green-500 text-white p-4 rounded relative"> <span class="spinner inline-block"> <span class="bounce-1 bg-white"></span> <span class="bounce-2 bg-white"></span> <span class="bounce-3 bg-white"></span> </span> <span class="button-text">Button</span> </button> <button class="bg-blue-500 text-white p-4 rounded relative"> <span class="spinner inline-block"> <span class="bounce-1 bg-white"></span> <span class="bounce-2 bg-white"></span> <span class="bounce-3 bg-white"></span> </span> <span class="button-text">Button</span> </button> <button class="bg-purple-500 text-white p-4 rounded relative"> <span class="spinner inline-block"> <span class="bounce-1 bg-white"></span> <span class="bounce-2 bg-white"></span> <span class="bounce-3 bg-white"></span> </span> <span class="button-text">Button</span> </button> <button class="bg-pink-500 text-white p-4 rounded relative"> <span class="spinner inline-block"> <span class="bounce-1 bg-white"></span> <span class="bounce-2 bg-white"></span> <span class="bounce-3 bg-white"></span> </span> <span class="button-text">Button</span> </button> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Disabled Button</h2> <!-- ***********************start*********************** --> <button class="bg-indigo-500 text-white p-4 rounded cursor-not-allowed" disabled>indigo Button</button> <button class="bg-gray-500 text-white p-4 rounded cursor-not-allowed" disabled>gray Button</button> <button class="bg-red-500 text-white p-4 rounded cursor-not-allowed" disabled>red Button</button> <button class="bg-yellow-500 text-white p-4 rounded cursor-not-allowed" disabled>yellow Button</button> <button class="bg-green-500 text-white p-4 rounded cursor-not-allowed" disabled>green Button</button> <button class="bg-blue-500 text-white p-4 rounded cursor-not-allowed" disabled>blue Button</button> <button class="bg-purple-500 text-white p-4 rounded cursor-not-allowed" disabled>purple Button</button> <button class="bg-pink-500 text-white p-4 rounded cursor-not-allowed" disabled>pink Button</button> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Link Button</h2> <!-- ***********************start*********************** --> <a href="#" class="bg-indigo-500 text-white p-4 rounded hover:bg-indigo-600"> Button</a> <a href="#" class="bg-gray-500 text-white p-4 rounded hover:bg-gray-600"> Button</a> <a href="#" class="bg-gray-500 text-white p-4 rounded hover:bg-gray-600"> Button</a> <a href="#" class="bg-yellow-500 text-white p-4 rounded hover:bg-yellow-600"> Button</a> <a href="#" class="bg-green-500 text-white p-4 rounded hover:bg-green-600"> Button</a> <a href="#" class="bg-blue-500 text-white p-4 rounded hover:bg-blue-600"> Button</a> <a href="#" class="bg-purple-500 text-white p-4 rounded hover:bg-purple-600"> Button</a> <a href="#" class="bg-pink-500 text-white p-4 rounded hover:bg-pink-600"> Button</a> <!-- ***********************end*********************** --> <!-- ***********************end*********************** --> <h2 class="text-2xl font-bold mt-8 mb-4 ">Other</h2> <!-- ***********************start*********************** --> <button class="bg-gray-500 hover:bg-gray-700 text-white hover:text-gray-100 py-2 px-4 rounded"> Click me </button> <button class="bg-blue-500 hover:shadow-lg text-white py-2 px-4 rounded"> Click me </button> <button class="bg-green-500 hover:rotate-3 py-2 px-4 rounded"> Click me </button> <button class="bg-blue-500 hover:bg-gradient-to-br from-blue-500 to-purple-600 text-white py-2 px-4 rounded"> Click me </button> </main> <footer class="bg-white p-6"> <p class="text-gray-700 text-center"> Copyright © 2022 Tailwind HTML Template </p> </footer> </body> </html>   

tailwind css button with icon multicolor example

OUTPUT

loop through object javascript | How will you loop through this array of objects in JavaScript?

[ Laravel Tips ] How to bulk insert in a table from fields constructed dynamically | laravel bulk upload tips example

Product Card Design Cards Css 

Html Shopping Cart Template Free Download Html Css Only

Html Css Toaster Type Massage Simple Example

Black Login Page Design In Html And Css With Source Code Codepen Type

Our Team Section Design Html Css Simple Example Gradient Background

Button Bootstrap 3,4,5 Gradient Background 

Gradient Text Color Css Generator | How do you make a gradient text color in CSS?

Gradient Text/Font FontAwesome Icon Example - CodePen Type