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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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] focus:shadow-[rgba(92,140,229,1)] 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