<button class="inline-block py-[10px] px-[30px] bg-primary-500 text-white transition-all hover:bg-primary-400 rounded-md border border-primary-500 hover:border-primary-400" type="button">
    Basic
</button>
<button class="inline-block py-[10px] px-[30px] bg-secondary-500 text-white transition-all hover:bg-secondary-400 rounded-md border border-secondary-500 hover:border-secondary-400" type="button">
    Secondary
</button>
<button class="inline-block py-[10px] px-[30px] bg-success-500 text-white transition-all hover:bg-success-400 rounded-md border border-success-500 hover:border-success-400" type="button">
    Success
</button>
<button class="inline-block py-[10px] px-[30px] bg-danger-500 text-white transition-all hover:bg-danger-400 rounded-md border border-danger-500 hover:border-danger-400" type="button">
    Danger
</button>
<button class="inline-block py-[10px] px-[30px] bg-warning-500 text-black transition-all hover:bg-warning-400 rounded-md border border-warning-500 hover:border-warning-400" type="button">
    Warning
</button>
<button class="inline-block py-[10px] px-[30px] bg-info-500 text-white transition-all hover:bg-info-400 rounded-md border border-info-500 hover:border-info-400" type="button">
    Info
</button>
<button class="inline-block py-[10px] px-[30px] bg-gray-50 text-black transition-all hover:bg-gray-100 rounded-md border border-gray-50 hover:border-gray-100" type="button">
    Light
</button>
<button class="inline-block py-[10px] px-[30px] bg-dark text-white transition-all hover:bg-black rounded-md border border-dark hover:border-black" type="button">
    Dark
</button>
<button class="inline-block py-[10px] px-[30px] bg-primary-500 text-white transition-all hover:bg-primary-400 rounded-md border border-primary-500 hover:border-primary-400 disabled:opacity-[.5] disabled:pointer-events-none" type="button" disabled>
    Disabled
</button>

<button class="inline-block py-[10px] px-[30px] text-primary-500 transition-all rounded-md border border-primary-500 hover:border-primary-500 hover:bg-primary-500 hover:text-white" type="button">
    Basic
</button>
<button class="inline-block py-[10px] px-[30px] text-secondary-500 transition-all rounded-md border border-secondary-500 hover:border-secondary-500 hover:bg-secondary-500 hover:text-white" type="button">
    Secondary
</button>
<button class="inline-block py-[10px] px-[30px] text-success-500 transition-all rounded-md border border-success-500 hover:border-success-500 hover:bg-success-500 hover:text-white" type="button">
    Success
</button>
<button class="inline-block py-[10px] px-[30px] text-danger-500 transition-all rounded-md border border-danger-500 hover:border-danger-500 hover:bg-danger-500 hover:text-white" type="button">
    Danger
</button>
<button class="inline-block py-[10px] px-[30px] text-warning-500 transition-all rounded-md border border-warning-500 hover:border-warning-500 hover:bg-warning-500 hover:text-white" type="button">
    Warning
</button>
<button class="inline-block py-[10px] px-[30px] text-info-500 transition-all rounded-md border border-info-500 hover:border-info-500 hover:bg-info-500 hover:text-white" type="button">
    Info
</button>
<button class="inline-block py-[10px] px-[30px] text-gray-500 transition-all rounded-md border border-gray-500 hover:border-gray-500 hover:bg-gray-500 hover:text-white" type="button">
    Light
</button>
<button class="inline-block py-[10px] px-[30px] text-dark transition-all rounded-md border border-dark hover:border-dark hover:bg-dark hover:text-white" type="button">
    Dark
</button>
<button class="inline-block py-[10px] px-[30px] text-primary-500 transition-all rounded-md border border-primary-500 hover:border-primary-500 hover:bg-primary-500 hover:text-white disabled:opacity-[.5] disabled:pointer-events-none" type="button" disabled>
    Disabled
</button>

<button class="block w-full text-center py-[10px] px-[30px] bg-primary-500 text-white transition-all hover:bg-primary-400 rounded-md border border-primary-500 hover:border-primary-400" type="button">
    Basic
</button>
<button class="block w-full text-center py-[10px] px-[30px] bg-primary-500 text-white transition-all hover:bg-primary-400 rounded-md border border-primary-500 hover:border-primary-400 disabled:opacity-[.5] disabled:pointer-events-none" type="button" disabled>
    Disabled
</button>