Buttons

Use our custom button styles for actions in forms, dialogs, with support for multiple sizes, states, etc.

Colors

Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button 

                      <a href="#" class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758]   active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-orange !text-white !bg-[#f78b77] border-[#f78b77] hover:text-white hover:bg-[#f78b77] hover:!border-[#f78b77]   active:text-white active:bg-[#f78b77] active:border-[#f78b77] disabled:text-white disabled:bg-[#f78b77] disabled:border-[#f78b77] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-red !text-white !bg-[#e2626b] border-[#e2626b] hover:text-white hover:bg-[#e2626b] hover:!border-[#e2626b]   active:text-white active:bg-[#e2626b] active:border-[#e2626b] disabled:text-white disabled:bg-[#e2626b] disabled:border-[#e2626b] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-pink !text-white !bg-[#d16b86] border-[#d16b86] hover:text-white hover:bg-[#d16b86] hover:!border-[#d16b86]   active:text-white active:bg-[#d16b86] active:border-[#d16b86] disabled:text-white disabled:bg-[#d16b86] disabled:border-[#d16b86] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-violet !text-white !bg-[#a07cc5] border-[#a07cc5] hover:text-white hover:bg-[#a07cc5] hover:!border-[#a07cc5]   active:text-white active:bg-[#a07cc5] active:border-[#a07cc5] disabled:text-white disabled:bg-[#a07cc5] disabled:border-[#a07cc5]  !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1]   active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-blue !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0]   active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0]  !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-leaf !text-white !bg-[#7cb798] border-[#7cb798] hover:text-white hover:bg-[#7cb798] hover:!border-[#7cb798] focus:shadow-[rgba(113,165,142,1)] active:text-white active:bg-[#7cb798] active:border-[#7cb798] disabled:text-white disabled:bg-[#7cb798] disabled:border-[#7cb798] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-fuchsia !text-white !bg-[#e668b3] border-[#e668b3] hover:text-white hover:bg-[#e668b3] hover:!border-[#e668b3]   active:text-white active:bg-[#e668b3] active:border-[#e668b3] disabled:text-white disabled:bg-[#e668b3] disabled:border-[#e668b3] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-sky !text-white !bg-[#5eb9f0] border-[#5eb9f0] hover:text-white hover:!bg-[#5eb9f0] hover:!border-[#5eb9f0] focus:shadow-[rgba(88,167,216,1)] active:text-white active:!bg-[#5eb9f0] active:border-[#5eb9f0] disabled:text-white disabled:!bg-[#5eb9f0] disabled:border-[#5eb9f0] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-grape !text-white !bg-[#605dba] border-[#605dba] hover:text-white hover:bg-[#605dba] hover:!border-[#605dba]   active:text-white active:bg-[#605dba] active:border-[#605dba] disabled:text-white disabled:bg-[#605dba] disabled:border-[#605dba] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-ash !text-[#343f52] bg-[#9499a3] border-[#9499a3] hover:!text-[#343f52] hover:bg-[#9499a3] hover:!border-[#9499a3] focus:shadow-[rgba(134,140,151,1)] active:!text-[#343f52] active:bg-[#9499a3] active:border-[#9499a3] disabled:!text-[#343f52] disabled:bg-[#9499a3] disabled:border-[#9499a3] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <br class="hidden xl:block lg:block">
                      <a href="#" class="btn btn-soft-yellow !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-orange !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-red !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-pink !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-violet !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-purple !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-blue !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-aqua !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-green !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-leaf !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-fuchsia !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-sky !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-grape !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-dark !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
                      <a href="#" class="btn btn-soft-ash !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>

Gradients

Button Button Button Button Button Button Button Button Button Button Button Button Button Button 
<a href="#" class="btn btn-gradient gradient-1 !rounded-[50rem]">Text</a>
<a href="#" class="btn btn-gradient gradient-2 !rounded-[50rem]">Text</a>
<a href="#" class="btn btn-gradient gradient-3 !rounded-[50rem]">Text</a>
<a href="#" class="btn btn-gradient gradient-4 !rounded-[50rem]">Text</a>
<a href="#" class="btn btn-gradient gradient-5 !rounded-[50rem]">Text</a>
<a href="#" class="btn btn-gradient gradient-6 !rounded-[50rem]">Text</a>
<a href="#" class="btn btn-gradient gradient-7 !rounded-[50rem]">Text</a>
	
<a href="#" class="btn btn-outline-gradient gradient-1 !rounded-[50rem]"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-2 !rounded-[50rem]"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-3 !rounded-[50rem]"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-4 !rounded-[50rem]"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-5 !rounded-[50rem]"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-6 !rounded-[50rem]"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-7 !rounded-[50rem]"><span>Text</span></a>

Sizes

Large Button Default Button Small Button 
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg !rounded-[50rem]">Large Button</a> 
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]">Default Button</a> 
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm !rounded-[50rem]">Small Button</a>

Shapes

Square Rounded Rounder Pill 
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-none">Square</a>
<a href="#" class="btn btn-primary">Rounded</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[0.8rem]">Rounder</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]">Pill</a>

Style

Solid Soft Outline Gradient Outline Gradient 
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]">Solid</a>
<a href="#" class="btn btn-soft-primary !rounded-[50rem]">Soft</a>
<a href="#" class="btn btn-outline-primary !rounded-[50rem]">Outline</a>
<a href="#" class="btn btn-gradient gradient-1 !rounded-[50rem] !mr-1 !mb-2 md:!mb-0">Gradient</a>
<a href="#" class="btn btn-outline-gradient gradient-1 !rounded-[50rem] !mr-1 !mb-2 md:!mb-0"><span>Outline Gradient</span></a>

Circle

<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-primary"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm"><i class="uil uil-check"></i></a>

<a href="#" class="btn btn-circle btn-soft-primary btn-lg"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary btn-sm"><i class="uil uil-check"></i></a>

<a href="#" class="btn btn-circle btn-outline-primary btn-lg"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-outline-primary"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-outline-primary btn-sm"><i class="uil uil-check"></i></a>

<a href="#" class="btn btn-circle btn-gradient gradient-1 btn-lg"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-gradient gradient-1"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-gradient gradient-1 btn-sm"><i class="uil uil-check"></i></a>

<a href="#" class="btn btn-circle btn-outline-gradient gradient-1 btn-lg"><span><i class="uil uil-check"></i></span></a>
<a href="#" class="btn btn-circle btn-outline-gradient gradient-1"><span><i class="uil uil-check"></i></span></a>
<a href="#" class="btn btn-circle btn-outline-gradient gradient-1 btn-sm"><span><i class="uil uil-check"></i></span></a>

Social


                      <nav class="nav social">
                        <a href="#" class="btn btn-circle btn-sm btn-twitter w-[1.8rem] h-[1.8rem] !text-[0.8rem] !inline-flex !items-center !justify-center !leading-none !m-[0_.7rem_0_0] !p-0 !rounded-[100%] !text-white !bg-[#5daed5] !border-transparent"><i class="uil uil-twitter before:content-['\ed59'] text-[.85rem]"></i></a>
                        <a href="#" class="btn btn-circle btn-sm btn-facebook w-[1.8rem] h-[1.8rem] !text-[0.8rem] !inline-flex !items-center !justify-center !leading-none !m-[0_.7rem_0_0] !p-0 !rounded-[100%] !text-white !bg-[#4470cf] !border-transparent"><i class="uil uil-facebook-f before:content-['\eae2'] text-[.85rem]"></i></a>
                        <a href="#" class="btn btn-circle btn-sm btn-dribbble w-[1.8rem] h-[1.8rem] !text-[0.8rem] !inline-flex !items-center !justify-center !leading-none !m-[0_.7rem_0_0] !p-0 !rounded-[100%] !text-white !bg-[#e94d88] !border-transparent"><i class="uil uil-dribbble before:content-['\eaa2'] text-[.85rem]"></i></a>
                      </nav>
                    </div>
                    <div class="mr-8">
                      <nav class="nav social social-muted">
                        <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
                        <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
                        <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
                      </nav>
                    </div>
                    <div class="mr-8">
                      <nav class="nav social">
                        <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
                        <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
                        <a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
                      </nav>

Icon

App Store Google Play 
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-start rounded">
 <i class="uil uil-apple"></i> App Store
</a>

<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-end rounded">
 Google Play <i class="uil uil-google-play"></i>
</a>

Expand

Learn More
Learn More 

                      <a href="#" class="btn btn-expand btn-primary !text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-5 !mb-3 xl:!mb-0 lg:!mb-0"><i class="uil uil-arrow-right before:content-['\e94c']"></i><span>Learn More</span></a>
                      <br class="xl:!hidden lg:!hidden">
                      <a href="#" class="btn btn-expand btn-soft-primary !rounded-[50rem] !mr-5"><i class="uil uil-arrow-right before:content-['\e94c']"></i><span>Learn More</span></a>

Play

<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0]   active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-play ripple !mr-5 xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#3f78e0] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#3f78e0] after:[animation-delay:.5s]"><i class="icn-caret-right"></i></a>
                    <a href="#" class="btn btn-circle btn-soft-primary btn-play ripple xl:!text-[2.3rem] w-[3.5rem] h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e0e9fa] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e0e9fa] after:[animation-delay:.5s]"><i class="icn-caret-right"></i></a>

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image