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>