buttons #01

1

Color options

Customize your colors.

<div class="flex flex-wrap items-end justify-center gap-4 py-12 mx-auto">
  <button
    class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-base-900 hover:bg-base-800 focus:outline-base-800 h-8 px-4 py-2 text-xs rounded-md"
  >
    Button Default
  </button>
  <button
    class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-base-900 hover:bg-base-800 focus:outline-base-800 h-9 px-4 py-2 text-sm rounded-md"
  >
    Button Default
  </button>
  <button
    class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-base-900 hover:bg-base-800 focus:outline-base-800 h-10 px-6 py-3 text-base rounded-lg"
  >
    Button Default
  </button>
  <button
    class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-base-900 hover:bg-base-800 focus:outline-base-800 h-11 px-6 py-3 text-base rounded-lg"
  >
    Button Default
  </button>
  <button
    class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-base-900 hover:bg-base-800 focus:outline-base-800 h-12 px-6 py-3 text-base rounded-lg"
  >
    Button Default
  </button>
  <button
    class="flex transition text-center justify-center font-medium items-center duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 text-white bg-base-900 hover:bg-base-800 focus:outline-base-800 h-14 px-6 py-3 text-lg rounded-lg"
  >
    Button Default
  </button>
</div>