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
Use our custom button styles for actions in forms, dialogs, with support for multiple sizes, states, etc. Bootstrap docs
// 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" />
// 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"
/>
// 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" />
// 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" />
// 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"
/>
// 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>}
/>
<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>
<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>
import Link from 'next/link';
<Link href="#" 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>
</Link>
<Link href="#" className="btn btn-expand btn-soft-primary rounded-pill me-5">
<i className="uil uil-arrow-right" />
<span>Learn More</span>
</Link>
import Link from 'next/link';
<Link href="#" className="btn btn-circle btn-primary btn-play ripple me-5">
<i className="icn-caret-right" />
</Link>
<Link href="#" className="btn btn-circle btn-soft-primary btn-play ripple">
<i className="icn-caret-right" />
</Link>
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox