Buttons
Use our custom button styles for actions in forms, dialogs, with support for multiple sizes, states, etc. Bootstrap docs
Colors
ButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButton
ButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButton
ButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButton
<a href="#" class="btn btn-yellow rounded-pill">Button</a>
<a href="#" class="btn btn-orange rounded-pill">Button</a>
<a href="#" class="btn btn-red rounded-pill">Button</a>
<a href="#" class="btn btn-pink rounded-pill">Button</a>
<a href="#" class="btn btn-violet rounded-pill">Button</a>
<a href="#" class="btn btn-purple rounded-pill">Button</a>
<a href="#" class="btn btn-blue rounded-pill">Button</a>
<a href="#" class="btn btn-aqua rounded-pill">Button</a>
<a href="#" class="btn btn-green rounded-pill">Button</a>
<a href="#" class="btn btn-leaf rounded-pill">Button</a>
<a href="#" class="btn btn-navy rounded-pill">Button</a>
<a href="#" class="btn btn-fuchsia rounded-pill">Button</a>
<a href="#" class="btn btn-sky rounded-pill">Button</a>
<a href="#" class="btn btn-grape rounded-pill">Button</a>
<a href="#" class="btn btn-ash rounded-pill">Button</a>
<a href="#" class="btn btn-primary rounded-pill">Button</a>
<a href="#" class="btn btn-white rounded-pill">Button</a>
<a href="#" class="btn btn-soft-yellow rounded-pill">Button</a>
<a href="#" class="btn btn-soft-orange rounded-pill">Button</a>
<a href="#" class="btn btn-soft-red rounded-pill">Button</a>
<a href="#" class="btn btn-soft-pink rounded-pill">Button</a>
<a href="#" class="btn btn-soft-violet rounded-pill">Button</a>
<a href="#" class="btn btn-soft-purple rounded-pill">Button</a>
<a href="#" class="btn btn-soft-blue rounded-pill">Button</a>
<a href="#" class="btn btn-soft-aqua rounded-pill">Button</a>
<a href="#" class="btn btn-soft-green rounded-pill">Button</a>
<a href="#" class="btn btn-soft-leaf rounded-pill">Button</a>
<a href="#" class="btn btn-soft-fuchsia rounded-pill">Button</a>
<a href="#" class="btn btn-soft-sky rounded-pill">Button</a>
<a href="#" class="btn btn-soft-grape rounded-pill">Button</a>
<a href="#" class="btn btn-soft-dark rounded-pill">Button</a>
<a href="#" class="btn btn-soft-ash rounded-pill">Button</a>Gradients
<a href="#" class="btn btn-gradient gradient-1 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-2 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-3 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-4 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-5 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-6 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-7 rounded-pill">Text</a>
<a href="#" class="btn btn-outline-gradient gradient-1 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-2 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-3 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-4 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-5 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-6 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-7 rounded-pill"><span>Text</span></a>Sizes
<a href="#" class="btn btn-primary btn-lg rounded-pill">Large Button</a>
<a href="#" class="btn btn-primary rounded-pill">Default Button</a>
<a href="#" class="btn btn-primary btn-sm rounded-pill">Small Button</a>Shapes
<a href="#" class="btn btn-primary rounded-0">Square</a>
<a href="#" class="btn btn-primary">Rounded</a>
<a href="#" class="btn btn-primary rounded-xl">Rounder</a>
<a href="#" class="btn btn-primary rounded-pill">Pill</a>Style
<a href="#" class="btn btn-primary rounded-pill">Solid</a>
<a href="#" class="btn btn-soft-primary rounded-pill">Soft</a>
<a href="#" class="btn btn-outline-primary rounded-pill">Outline</a>
<a href="#" class="btn btn-gradient gradient-1 rounded-pill me-1 mb-2 mb-md-0">Gradient</a>
<a href="#" class="btn btn-outline-gradient gradient-1 rounded-pill me-1 mb-2 mb-md-0"><span>Outline Gradient</span></a>Circle
<a href="#" class="btn btn-circle btn-primary 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 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>Icon
<a class="btn btn-primary btn-icon btn-icon-start rounded">
<i class="uil uil-apple"></i> App Store
</a>
<a class="btn btn-primary btn-icon btn-icon-end rounded">
Google Play <i class="uil uil-google-play"></i>
</a>Expand
<a href="#" class="btn btn-expand btn-primary rounded-pill">
<i class="uil uil-arrow-right"></i>
<span>Learn More</span>
</a>
<a href="#" class="btn btn-expand btn-soft-primary rounded-pill">
<i class="uil uil-arrow-right"></i>
<span>Learn More</span>
</a>Play
<a href="#" class="btn btn-circle btn-primary btn-play ripple">
<i class="icn-caret-right"></i>
</a>
<a href="#" class="btn btn-circle btn-soft-primary btn-play ripple">
<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 Nuxtjs
Social