<!-- 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>