buttons #01

1

Color options

Customize your colors.

<div class="flex flex-wrap items-end justify-center gap-4 py-48 mx-auto">
  <button
    class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-base-500/30 inset-shadow-white/30 text-shadow-base-700 ring-base-700 bg-linear-to-b from-base-700 to-base-800 to-70% focus:outline-base-700 h-8 px-4 py-2 text-xs rounded-md"
  >
    Button Default
  </button>
  <button
    class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-base-500/30 inset-shadow-white/30 text-shadow-base-700 ring-base-700 bg-linear-to-b from-base-700 to-base-800 to-70% focus:outline-base-700 h-9 px-4 py-2 text-sm rounded-md"
  >
    Button Default
  </button>
  <button
    class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-base-500/30 inset-shadow-white/30 text-shadow-base-700 ring-base-700 bg-linear-to-b from-base-700 to-base-800 to-70% focus:outline-base-700 h-10 px-6 py-3 text-base rounded-lg"
  >
    Button Default
  </button>
  <button
    class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-base-500/30 inset-shadow-white/30 text-shadow-base-700 ring-base-700 bg-linear-to-b from-base-700 to-base-800 to-70% focus:outline-base-700 h-11 px-6 py-3 text-base rounded-lg"
  >
    Button Default
  </button>
  <button
    class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-base-500/30 inset-shadow-white/30 text-shadow-base-700 ring-base-700 bg-linear-to-b from-base-700 to-base-800 to-70% focus:outline-base-700 h-12 px-6 py-3 text-base rounded-lg"
  >
    Button Default
  </button>
  <button
    class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-base-500/30 inset-shadow-white/30 text-shadow-base-700 ring-base-700 bg-linear-to-b from-base-700 to-base-800 to-70% focus:outline-base-700 h-14 px-6 py-3 text-lg rounded-lg"
  >
    Button Default
  </button>
</div>