Innova Hub es una empresa de tecnología especializada en IA Agéntica para el sector educativo.
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="#">
<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>
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>
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Contáctanos