<!-- Primary -->
<button
  class="text-indigo-500 py-2 px-4 uppercase font-medium "
>
  Primary
</button>

<!-- Info -->
<button
  class="text-blue-500 py-2 px-4 uppercase font-medium "
>
  Info
</button>


<!-- Success -->
<button
  class="text-green-500 py-2 px-4 uppercase font-medium "
>
  Success
</button>


<!-- Danger -->
<button
  class="text-red-500 py-2 px-4 uppercase font-medium "
>
  Danger
</button>


<!-- Warning -->
<button
  class="text-yellow-500 py-2 px-4 uppercase font-medium "
>
  Warning
</button>


<!-- Default -->
<button
  class="text-gray-800-500 py-2 px-4 uppercase font-medium "
>
  Default
</button>


<!-- Secondary -->
<button
  class="text-gray-500 py-2 px-4 uppercase font-medium "
>
  Secondary
</button>
                    
                

                    
                         <!-- Primary -->
<button
  class="text-indigo-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-indigo-500 hover:bg-indigo-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Primary
</button>

<!-- Info -->
<button
  class="text-blue-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-blue-500 hover:bg-blue-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Info
</button>


<!-- Success -->
<button
  class="text-green-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-green-500 hover:bg-green-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Success
</button>


<!-- Danger -->
<button
  class="text-red-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-red-500 hover:bg-red-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Danger
</button>


<!-- Warning -->
<button
  class="text-yellow-500 hover:text-white py-2 px-4 uppercase rounded bg-white border border-yellow-500 hover:bg-yellow-600 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Warning
</button>


<!-- Default -->
<button
  class="text-gray-600 hover:text-white py-2 px-4 uppercase rounded bg-white border border-gray-600 hover:bg-gray-700 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Default
</button>


<!-- Secondary -->
<button
  class="text-gray-500 hover:text-gray-700 py-2 px-4 uppercase rounded bg-white border border-gray-200 hover:bg-gray-200 shadow-none hover:shadow-lg font-medium transition duration-200"
>
  Secondary
</button>
                    
                

                    
                         <!-- Primary -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-indigo-500 hover:bg-indigo-600 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Primary
</button>

<!-- Info -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-blue-400 hover:bg-blue-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Info
</button>

<!-- Success -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-green-400 hover:bg-green-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Success
</button>

<!-- Danger -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-red-400 hover:bg-red-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Danger
</button>

<!-- Warning -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-yellow-400 hover:bg-yellow-500 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Warning
</button>

<!-- Default -->
<button
  class="text-white py-2 px-4 uppercase rounded bg-gray-700 hover:bg-gray-800 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Default
</button>

<!-- Secondary -->
<button
  class="py-2 px-4 uppercase rounded bg-gray-100 hover:bg-gray-200 text-gray-700 shadow hover:shadow-lg font-medium transition transform hover:-translate-y-0.5"
>
  Secondary
</button>
                    
                

                    
                         <button
    class="bg-white py-2 px-4 rounded-lg border border-gray-200 hover:border-gray-300 text-purple-900 shadow-md font-medium transition-colors"
  >
    Default
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-purple-700 hover:bg-purple-600 shadow-md font-medium  transition-colors"
  >
    Primary
  </button>

  <button
    class="text-purple-900 py-2 px-4 rounded-lg hover:bg-gray-100 font-medium transition-colors"
  >
    Text
  </button>

  <button
    class="text-purple-900 py-2 px-4 rounded-lg hover:underline font-medium transition-colors"
  >
    Ghost
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-purple-900 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Dark
  </button>

  <button
    class="text-purple-700 py-2 px-4 rounded-lg bg-purple-100 hover:bg-purple-200 font-medium transition-colors"
  >
    Light
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-green-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Success
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-blue-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Info
  </button>

  <button
    class="text-black py-2 px-4 rounded-lg bg-yellow-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Info
  </button>

  <button
    class="text-white py-2 px-4 rounded-lg bg-red-500 hover:bg-purple-800 font-medium transition-colors shadow-md"
  >
    Danger
  </button>