Nike Air Sneakers

~~$55~~ $45

Colorful Sneakers

$45

Polaroid Camera

$45

Subtotal:$135.99

Checkout

Free shipping on all orders over $50

Buttons

Use our custom button styles for actions in forms, dialogs, with support for multiple sizes, states, etc. Bootstrap docs

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

View example's code

// 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

Button Button Button Button Button Button Button
Button Button Button Button Button Button Button

View example's code

// 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

Large Button Default Button Small Button

View example's code

// 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

Square Rounded Pill

View example's code

// 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

Solid Soft Outline Gradient Outline Gradient

View example's code

// 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

View example's code

// 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

View example's code

<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

App Store Google Play

View example's code

<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

Learn More
Learn More

View example's code

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

View example's code

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>

Comenzar with Innova Hub.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Contáctanos

Innova Hub

Contáctanos

Más información

Síguenos

Your Cart

Nike Air Sneakers

Colorful Sneakers

Polaroid Camera

Buttons

Colors

Gradients

Sizes

Shapes

Style

Circle

Social

Icon

Expand

Play

Comenzar with Innova Hub.

PÁGINAS DE PROYECTOS

PROYECTOS INDIVIDUALES

Uso

Guía de Estilo

Elementos

Buttons

Colors

Gradients

Sizes

Shapes

Style

Circle

Social

Icon

Expand

Play

Comenzar with Innova Hub.