Sandbox
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
Follow Us
Your Cart
Buttons
Use our custom button styles for actions in forms, dialogs, with support for multiple sizes, states, etc. Bootstrap docs
Colors
ButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButton
ButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButton
ButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButton
// reusable link component
import NextLink from 'components/reuseable/links/NextLink';
<NextLink title="Button" href="#" className="btn btn-yellow rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-pink rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-orange rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-purple rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-violet rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-aqua rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-leaf rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-blue rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-sky rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-fuchsia rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-navy rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-grape rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-ash rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-orange rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-pink rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-yellow rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-violet rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-purple rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-blue rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-aqua rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-leaf rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-fuchsia rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-sky rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-grape rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-navy rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-soft-ash rounded-pill" />
Gradients
// reusable link component
import NextLink from 'components/reuseable/links/NextLink';
<NextLink title="Button" href="#" className="btn btn-gradient gradient-1 rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-gradient gradient-2 rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-gradient gradient-3 rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-gradient gradient-4 rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-gradient gradient-5 rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-gradient gradient-6 rounded-pill" />
<NextLink title="Button" href="#" className="btn btn-gradient gradient-7 rounded-pill" />
<NextLink
href="#"
title={<span>Button</span>}
className="btn btn-outline-gradient gradient-1 rounded-pill"
/>
<NextLink
href="#"
title={<span>Button</span>}
className="btn btn-outline-gradient gradient-2 rounded-pill"
/>
<NextLink
href="#"
title={<span>Button</span>}
className="btn btn-outline-gradient gradient-3 rounded-pill"
/>
<NextLink
href="#"
title={<span>Button</span>}
className="btn btn-outline-gradient gradient-4 rounded-pill"
/>
<NextLink
href="#"
title={<span>Button</span>}
className="btn btn-outline-gradient gradient-5 rounded-pill"
/>
<NextLink
href="#"
title={<span>Button</span>}
className="btn btn-outline-gradient gradient-6 rounded-pill"
/>
<NextLink
href="#"
title={<span>Button</span>}
className="btn btn-outline-gradient gradient-7 rounded-pill"
/>
Sizes
// reusable link component
import NextLink from 'components/reuseable/links/NextLink';
<NextLink href="#" title="Large Button" className="btn btn-primary btn-lg rounded-pill" />
<NextLink href="#" title="Default Button" className="btn btn-primary rounded-pill" />
<NextLink href="#" title="Small Button" className="btn btn-primary btn-sm rounded-pill" />
Shapes
// reusable link component
import NextLink from 'components/reuseable/links/NextLink';
<NextLink title="Square" href="#" className="btn btn-primary rounded-0" />
<NextLink title="Rounded" href="#" className="btn btn-primary" />
<NextLink title="Pill" href="#" className="btn btn-primary rounded-pill" />
Style
// reusable link component
import NextLink from 'components/reuseable/links/NextLink';
<NextLink href="#" title="Solid" className="btn btn-primary rounded-pill" />
<NextLink href="#" title="Soft" className="btn btn-soft-primary rounded-pill" />
<NextLink href="#" title="Outline" className="btn btn-outline-primary rounded-pill" />
<NextLink href="#" title="Gradient" className="btn btn-gradient gradient-1 rounded-pill" />
<NextLink
href="#"
title={<span>Outline Gradient</span>}
className="btn btn-outline-gradient gradient-1 rounded-pill"
/>
Circle
// reusable link component
import NextLink from 'components/reuseable/links/NextLink';
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-primary btn-lg"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-primary"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-primary btn-sm"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-soft-primary btn-lg"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-soft-primary"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-soft-primary btn-sm"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-outline-primary btn-lg"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-outline-primary"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-outline-primary btn-sm"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-gradient gradient-1 btn-lg"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-gradient gradient-1"
/>
<NextLink
href="#"
title={<i className="uil uil-check" />}
className="btn btn-circle btn-gradient gradient-1 btn-sm"
/>
<NextLink
href="#"
className="btn btn-circle btn-outline-gradient gradient-1 btn-lg"
title={<span> <i className="uil uil-check" /> </span>}
/>
<NextLink
href="#"
className="btn btn-circle btn-outline-gradient gradient-1"
title={<span> <i className="uil uil-check" /> </span>}
/>
<NextLink
href="#"
className="btn btn-circle btn-outline-gradient gradient-1 btn-sm"
title={<span> <i className="uil uil-check" /> </span>}
/>
Social
<nav className="nav social">
<a href="#" className="btn btn-circle btn-sm btn-twitter">
<i className="uil uil-twitter" />
</a>
<a href="#" className="btn btn-circle btn-sm btn-facebook">
<i className="uil uil-facebook-f" />
</a>
<a href="#" className="btn btn-circle btn-sm btn-dribbble">
<i className="uil uil-dribbble" />
</a>
</nav>
<nav className="nav social social-muted">
<a href="#">
<i className="uil uil-twitter" />
</a>
<a href="#">
<i className="uil uil-facebook-f" />
</a>
<a href="#">
<i className="uil uil-dribbble" />
</a>
</nav>
<nav className="nav social">
<a href="#">
<i className="uil uil-twitter" />
</a>
<a href="#">
<i className="uil uil-facebook-f" />
</a>
<a href="#">
<i className="uil uil-dribbble" />
</a>
</nav>
Icon
<a className="btn btn-primary btn-icon btn-icon-start rounded me-2">
<i className="uil uil-apple" /> App Store
</a>
<a className="btn btn-primary btn-icon btn-icon-end rounded">
Google Play <i className="uil uil-google-play" />
</a>
Expand
import Link from 'next/link';
<Link href="#">
<a className="btn btn-expand btn-primary rounded-pill me-5 mb-3 mb-lg-0">
<i className="uil uil-arrow-right" />
<span>Learn More</span>
</a>
</Link>
<Link href="#">
<a className="btn btn-expand btn-soft-primary rounded-pill me-5">
<i className="uil uil-arrow-right" />
<span>Learn More</span>
</a>
</Link>
Play
import Link from 'next/link';
<Link href="#">
<a className="btn btn-circle btn-primary btn-play ripple me-5">
<i className="icn-caret-right" />
</a>
</Link>
<Link href="#">
<a className="btn btn-circle btn-soft-primary btn-play ripple">
<i className="icn-caret-right" />
</a>
</Link>
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.
