Edit these docs

Buttons

eCommerce buttons

Buttons components dedicated to building eCommerce projects.

Basic buttons 



        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>
        <button type="button" class="btn btn-link">Link</button>

Outline buttons 



        <button type="button" class="btn btn-outline-primary waves-effect">Primary</button>
        <button type="button" class="btn btn-outline-default waves-effect">Default</button>
        <button type="button" class="btn btn-outline-secondary waves-effect">Secondary</button>
        <button type="button" class="btn btn-outline-success waves-effect">Success</button>
        <button type="button" class="btn btn-outline-info waves-effect">Info</button>
        <button type="button" class="btn btn-outline-warning waves-effect">Warning</button>
        <button type="button" class="btn btn-outline-danger waves-effect">Danger</button>

Rounded buttons 



          <button type="button" class="btn btn-primary btn-rounded">Primary</button>
          <button type="button" class="btn btn-default btn-rounded">Default</button>
          <button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
          <button type="button" class="btn btn-success btn-rounded">Success</button>
          <button type="button" class="btn btn-info btn-rounded">Info</button>
          <button type="button" class="btn btn-warning btn-rounded">Warning</button>
          <button type="button" class="btn btn-danger btn-rounded">Danger</button>

Rounded outline buttons 



        <button type="button" class="btn btn-outline-primary btn-rounded">Primary</button>
        <button type="button" class="btn btn-outline-default btn-rounded">Default</button>
        <button type="button" class="btn btn-outline-secondary btn-rounded">Secondary</button>
        <button type="button" class="btn btn-outline-success btn-rounded">Success</button>
        <button type="button" class="btn btn-outline-info btn-rounded">Info</button>
        <button type="button" class="btn btn-outline-warning btn-rounded">Warning</button>
        <button type="button" class="btn btn-outline-danger btn-rounded">Danger</button>

Floating buttons 



          <a class="btn-floating btn-lg btn-default"><i class="fas fa-shopping-cart"></i></a>
          <a class="btn-floating btn-primary"><i class="fas fa-envelope"></i></a>
          <a class="btn-floating btn-sm btn-danger"><i class="fas fa-exclamation"></i></a>

Social buttons 



        <!--Facebook-->
        <button role="button" class="btn btn-fb"><i class="fab fa-facebook-f pr-1"></i> Facebook</button>
        <!--Twitter-->
        <button role="button" class="btn btn-tw"><i class="fab fa-twitter pr-1"></i> Twitter</button>
        <!--Google +-->
        <button role="button" class="btn btn-gplus"><i class="fab fa-google-plus-g pr-1"></i> Google +</button>
        <!--Linkedin-->
        <button role="button" class="btn btn-li"><i class="fab fa-linkedin-in pr-1"></i> Linkedin</button>
        <!--Instagram-->
        <button role="button" class="btn btn-ins"><i class="fab fa-instagram pr-1"></i> Instagram</button>
        <!--Pinterest-->
        <button role="button" class="btn btn-pin"><i class="fab fa-pinterest pr-1"></i> Pinterest</button>
        <!--Vkontakte-->
        <button role="button" class="btn btn-vk"><i class="fab fa-vk pr-1"></i> Vkontakte</button>
        <!--Stack Overflow-->
        <button role="button" class="btn btn-so"><i class="fab fa-stack-overflow pr-1"></i> Stack Overflow</button>
        <!--Youtube-->
        <button role="button" class="btn btn-yt"><i class="fab fa-youtube pr-1"></i> Youtube</button>
        <!--Slack-->
        <button role="button" class="btn btn-slack"><i class="fab fa-slack-hash pr-1"></i> Slack</button>
        <!--Github-->
        <button role="button" class="btn btn-git"><i class="fab fa-github pr-1"></i> Github</button>
        <!--Comments-->
        <button role="button" class="btn btn-comm"><i class="fas fa-comments pr-1"></i> Comments</button>
        <!--Email-->
        <button role="button" class="btn btn-email"><i class="fas fa-envelope pr-1"></i> Email</button>
        <!--Dribbble-->
        <button role="button" class="btn btn-dribbble"><i class="fab fa-dribbble pr-1"></i> Dribbble</button>
        <!--Reddit-->
        <button role="button" class="btn btn-reddit"><i class="fab fa-reddit-alien pr-1"></i> Reddit</button>
        <!--WhatsApp-->
        <button role="button" class="btn btn-whatsapp"><i class="fab fa-whatsapp pr-1"></i> Whatsapp</button>

Fixed button

See the live example of a fixed button in the bottom right corner of this page. 



          <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
            <a class="btn-floating btn-lg btn-primary">
              <i class="fas fa-shopping-basket"></i>
            </a>
          
            <ul class="list-unstyled">
              <li><a class="btn-floating btn-danger"><i class="fas fa-star"></i></a></li>
              <li><a class="btn-floating btn-warning darken-1"><i class="fas fa-user"></i></a></li>
              <li><a class="btn-floating btn-success"><i class="fas fa-envelope"></i></a></li>
              <li><a class="btn-floating btn-info"><i class="fas fa-shopping-cart"></i></a></li>
            </ul>
          </div>

Flat button 



          <button type="button" class="btn btn-flat btn-lg">Click me</button>

Buttons with icons 



          <button class="btn btn-primary"><i class="fas fa-shopping-cart mr-1"></i> Buy now</button>
          <button class="btn btn-light">Details <i class="fas fa-info-circle ml-1"></i></button>

Button tags

Link 


        <a class="btn btn-primary" role="button">Link</a>
        <button class="btn btn-primary" type="submit">Button</button>
        <input class="btn btn-primary" type="button" value="Input">
        <input class="btn btn-primary" type="submit" value="Submit">
        <input class="btn btn-primary" type="reset" value="Reset">

Button sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.



        <button type="button" class="btn btn-primary btn-lg">Large button</button>
        <button type="button" class="btn btn-light btn-lg">Large button</button>

      


        <button type="button" class="btn btn-primary btn-md">Medium button</button>
        <button type="button" class="btn btn-light btn-md">Medium button</button>

      


        <button type="button" class="btn btn-primary btn-sm">Small button</button>
        <button type="button" class="btn btn-light btn-sm">Small button</button>

Create block level buttons — those that span the full width of a parent—by adding the class.btn-block. 



        <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
        <button type="button" class="btn btn-light btn-lg btn-block">Block level button</button>