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>