buttons #01

Default button

1

Color options

Customize your colors.

<div class="flex flex-wrap items-end justify-center py-48 mx-auto gap-4">
  <button
    class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm h-8 px-4 py-2 text-xs rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
  >
    Extra Small
  </button>
  <button
    class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
  >
    Small
  </button>
  <button
    class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm h-10 px-6 py-3 text-base rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
  >
    Base (Default)
  </button>
  <button
    class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm h-11 px-6 py-3 text-base rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
  >
    Medium
  </button>
  <button
    class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm h-12 px-6 py-3 text-lg rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
  >
    Large
  </button>
  <button
    class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm h-14 px-6 py-3 text-xl rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
  >
    Extra Large
  </button>
</div>