Components
Tailwind CSS Gradient Button

Horizon UI Boilerplate - Default

Tailwind CSS Gradient Button

This is the standard gradient button used throughout our project.

page.tsx
    <button 
        onClick={() => handleCheckout(price)}
        className="mx-auto flex w-full items-center justify-center rounded-full bg-boilerplateNavy px-4 py-5 text-sm font-medium text-white duration-[0.2s] hover:shadow-[0px_11px_24px_-13px_rgba(10,_8,_38,_0.50)] active:shadow-[0px_21px_34px_-13px_rgba(10,_8,_38,_0.50)]">
        Get started now
        <MdChevronRight className="mt-0.5 h-4 w-4" />
    </button>

Gradient Button