Home > Tailwind Components > Buttons

Tailwind CSS Buttons

Hubspot Button

<button class="bg-[#ff5c35] hover:bg-[#e04826] active:bg-[#b3361d] font-bold text-white flex h-8 lg:h-11 items-center px-4 rounded-md shrink-0 text-nowrap whitespace-nowrap text-sm lg:text-lg">
    Get a demo
</button>

Reddit Button

<button class="bg-[#D93900] hover:bg-[#AE2C00] font-bold text-white flex h-10 items-center px-4 rounded-full shrink-0 text-nowrap whitespace-nowrap text-sm lg:text-lg">
    Get a demo
</button>

Facebook Button

<button class="bg-[#42b72a] hover:bg-[#36a420] active:bg-[#2b9217] text-white px-4 leading-[48px] font-bold inline-block text-center align-middle text-lg text-nowrap whitespace-nowrap rounded-md">
    Create new account
</button>

Youtube Button

<button class="bg-[#0f0f0f] hover:bg-[#272727] font-medium text-white leading-[36px] flex items-center justify-center h-9 rounded-[18px] px-4 shrink-0 text-nowrap whitespace-nowrap text-sm">
    Subscribe
</button>

Amazon Button

<div class="w-40">
    <button class="rounded-lg bg-[#ffd814] border border-[#fcd200] text-[#0f1111] text-[13px] leading-[29px] pr-[11px] pl-[10px] h-[29px] inline-block text-center align-middle shadow-[0_2px_5px_0_rgba(213,217,217,0.5) w-full">
        Shop now
    </button>
</div>