"Bootstrap 4 Buttons (social, animated, icons)"
Bootstrap 4.1.1 Snippet by themesberg

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!doctype html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" type="text/css"> <link rel="stylesheet" href="https://demo.themesberg.com/pixel-pro/css/pixel.css" type="text/css"> </head> <body> <div class="section section-md py-5"> <div class="container"> <!-- Title --> <div class="row"> <div class="col-md-4 text-center mx-auto"> <div class="mb-5"> <a href="https://themesberg.com"> <img src="https://themesberg.com/img/brand/themesberg-logo.svg" alt="Logo Themesberg Light" class="mb-4" style="width: 75px;"> <h1 class="h3 mb-4">Themesberg</h1> </a> <h6 class="font-weight-bold"><a href="https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit" target="_blank" class="btn mr-2 mb-2 btn-tertiary animate-up-2">Download buttons</a></h6> </div> </div> </div> <div class="row mt-4"> <div class="col-md-10 mx-auto"> <div class="mb-3"> <h6 class="font-weight-bold">Main Buttons</h6> </div> <!--Buttons--> <button class="btn mr-2 mb-2 btn-primary" type="button">Button</button> <button class="btn mr-2 mb-2 btn-icon btn-primary" type="button"> <span class="btn-inner-icon"><i class="fas fa-brain"></i></span> <span class="btn-inner-text">Icon Left</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-primary" type="button"> <span class="btn-inner-text">Icon Right</span> <span class="btn-inner-icon"><i class="fas fa-brain"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-primary" type="button"> <span class="btn-inner-icon"><i class="far fa-heart"></i></span> </button> <!--End of Buttons--> <div class="mb-3 mt-5"> <h6 class="font-weight-bold">Round Main Buttons</h6> </div> <!--Buttons--> <button class="btn mr-2 mb-2 btn-pill btn-primary" type="button">Button</button> <button class="btn mr-2 mb-2 btn-pill btn-icon btn-primary" type="button"> <span class="btn-inner-icon"><i class="fas fa-brain"></i></span> <span class="btn-inner-text">Icon Left</span> </button> <button class="btn mr-2 mb-2 btn-pill btn-icon btn-primary" type="button"> <span class="btn-inner-text">Icon Right</span> <span class="btn-inner-icon"><i class="fas fa-brain"></i></span> </button> <button class="btn mr-2 mb-2 btn-pill btn-icon-only btn-primary" type="button"> <span class="btn-inner-icon"><i class="far fa-thumbs-up"></i></span> </button> <!--End of Buttons--> <div class="mb-3 mt-5"> <h6 class="font-weight-bold">Outline Buttons</h6> </div> <!--Buttons--> <button class="btn mr-2 mb-2 btn-outline-primary" type="button">Outline-primary</button> <button class="btn mr-2 mb-2 btn-icon btn-outline-primary" type="button"> <span class="btn-inner-icon"><i class="fas fa-brain"></i></span> <span class="btn-inner-text">Icon Left</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-outline-primary" type="button"> <span class="btn-inner-text">Icon Right</span> <span class="btn-inner-icon"><i class="fas fa-brain"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-outline-primary" type="button"> <span class="btn-inner-icon"><i class="far fa-thumbs-up"></i></span> </button> <!--End of Buttons--> <div class="mb-3 mt-5"> <h6 class="font-weight-bold">Round Outline Buttons</h6> </div> <!--Buttons--> <button class="btn mr-2 mb-2 btn-pill btn-outline-primary" type="button">Outline-primary</button> <button class="btn mr-2 mb-2 btn-pill btn-icon btn-outline-primary" type="button"> <span class="btn-inner-icon"><i class="fas fa-brain"></i></span> <span class="btn-inner-text">Icon Left</span> </button> <button class="btn mr-2 mb-2 btn-pill btn-icon btn-outline-primary" type="button"> <span class="btn-inner-text">Icon Right</span> <span class="btn-inner-icon"><i class="fas fa-brain"></i></span> </button> <button class="btn mr-2 mb-2 btn-pill btn-icon-only btn-outline-primary" type="button"> <span class="btn-inner-icon"><i class="far fa-thumbs-up"></i></span> </button> <div class="mb-3 mt-5"> <h6 class="font-weight-bold">Animated Buttons</h6> </div> <button class="btn mb-2 mr-2 btn-primary animate-up-2" type="button">Animate up</button> <button class="btn mb-2 mr-2 btn-secondary animate-right-3" type="button">Animate right</button> <button class="btn mb-2 mr-2 btn-warning animate-down-2" type="button">Animate down</button> <button class="btn mb-2 mr-2 btn-tertiary animate-left-3" type="button">Animate left</button> <div class="mb-3 mt-5"> <h6 class="font-weight-bold">Loading Buttons</h6> </div> <!--Buttons--> <button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="sr-only">Loading...</span> </button> <button class="btn btn-primary" type="button" disabled> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="ml-1 btn-inner-text">Loading...</span> </button> <button class="btn btn-secondary" type="button" disabled> <span class="ml-r btn-inner-text">Loading...</span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </button> <div class="mb-3 mt-5"> <h6 class="font-weight-bold mb-3">Toggle loading transitions</h6> <div class="form-group"> <label class="custom-toggle custom-toggle-md"> <input id="toggleTransitions" type="checkbox" data-check-toggle="toggle"> <span class="custom-toggle-slider rounded-toggle"></span> </label> </div> <button class="btn btn-primary btn-loading-overlay mr-2 mb-2" type="button"> <span class="spinner"> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </span> <span class="ml-1 btn-inner-text">Submit</span> </button> <button class="btn btn-secondary btn-loading-overlay mr-2 mb-2" type="button"> <span class="spinner"> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span> </span> <span class="ml-1 btn-inner-text">Submit</span> </button> <p class="help mt-2">*Use these when programatically changing the state of the button for a smooth transition.</p> </div> <!--End of Buttons--> <div class="mb-3 mt-5"> <h6 class="font-weight-bold mb-3">Dropdown buttons</h6> <div class="dropdown"> <div class="btn-group mr-2 mb-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-angle-down dropdown-arrow"></i> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group mr-2 mb-2"> <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-angle-down dropdown-arrow"></i> <span class="sr-only">Toggle Dropdown</span> </button> <button type="button" class="btn btn-secondary">Secondary</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> <div class="btn-group mb-2 mr-2"> <button type="button" class="btn btn-tertiary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fas fa-angle-down dropdown-arrow"></i> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> <div class="mb-3 mt-5"> <h6 class="font-weight-bold">Link Buttons</h6> </div> <!--Buttons--> <a href="#" class="btn mr-2 btn-link text-default font-weight-bold">Primary</a> <a href="#" class="btn mr-2 btn-link text-primary btn-icon"> <span class="btn-inner-icon"><i class="fas fa-link"></i></span> <span class="btn-inner-text font-weight-bold">Icon Left</span> </a> <a href="#" class="btn mr-2 btn-link text-primary btn-icon"> <span class="btn-inner-text font-weight-bold">Icon Right</span> <span class="btn-inner-icon"><i class="fas fa-link"></i></span> </a> <!--End of Buttons--> <div class="mb-3 mt-5"> <h6 class="font-weight-bold">Sizes</h6> </div> <!--Buttons--> <button class="btn mr-2 mb-2 btn-sm btn-primary" type="button">Small</button> <button class="btn mr-2 mb-2 btn-primary" type="button">Regular</button> <button class="btn mr-2 mb-2 btn-lg btn-primary" type="button">Large Button</button> <!--End of Buttons--> <!-- Button colors --> <div class="mb-3 mt-5"> <h6 class="font-weight-bold">Choose your color</h6> </div> <div class="mb-3 mt-5"> <small class="text-uppercase font-weight-bold">Main</small> </div> <!--Buttons--> <button class="btn mr-2 mb-2 btn-primary" type="button">Primary</button> <button class="btn mr-2 mb-2 btn-secondary" type="button">Secondary</button> <button class="btn mr-2 mb-2 btn-tertiary" type="button">Tertiary</button> <button class="btn mr-2 mb-2 btn-info" type="button">Info</button> <button class="btn mr-2 mb-2 btn-success" type="button">Success</button> <button class="btn mr-2 mb-2 btn-warning" type="button">Warning</button> <button class="btn mr-2 mb-2 btn-danger" type="button">Danger</button> <button class="btn mr-2 mb-2 btn-dark" type="button">Dark</button> <button class="btn mr-2 mb-2 btn-gray" type="button">Gray</button> <button class="btn mr-2 mb-2 btn-light" type="button">Light</button> <button class="btn mr-2 mb-2 btn-white" type="button">White</button> <!--End Of Buttons--> <div class="mb-3 mt-5"> <small class="text-uppercase font-weight-bold">Outline</small> </div> <!--Buttons--> <button class="btn mr-2 mb-2 btn-outline-primary" type="button">Primary</button> <button class="btn mr-2 mb-2 btn-outline-secondary" type="button">Secondary</button> <button class="btn mr-2 mb-2 btn-outline-tertiary" type="button">Tertiary</button> <button class="btn mr-2 mb-2 btn-outline-info" type="button">Info</button> <button class="btn mr-2 mb-2 btn-outline-success" type="button">Success</button> <button class="btn mr-2 mb-2 btn-outline-warning" type="button">Warning</button> <button class="btn mr-2 mb-2 btn-outline-danger" type="button">Danger</button> <button class="btn mr-2 mb-2 btn-outline-dark" type="button">Dark</button> <button class="btn mr-2 mb-2 btn-outline-gray" type="button">Gray</button> <button class="btn mr-2 mb-2 btn-outline-light" type="button">Light</button> <!--End Of Buttons--> <div class="mb-3 mt-5"> <small class="text-uppercase font-weight-bold">Round Outline</small> </div> <!--Buttons--> <button class="btn mr-2 mb-2 btn-pill btn-outline-primary" type="button">Primary</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-secondary" type="button">Secondary</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-tertiary" type="button">Tertiary</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-info" type="button">Info</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-success" type="button">Success</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-warning" type="button">Warning</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-danger" type="button">Danger</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-dark" type="button">Dark</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-gray" type="button">Gray</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-light" type="button">Light</button> <button class="btn mr-2 mb-2 btn-pill btn-outline-white" type="button">White</button> <!--End Of Buttons--> <!-- Button links --> <div class="mb-3 mt-5"> <small class="text-uppercase font-weight-bold">Links</small> </div> <!--Buttons--> <a href="#" class="btn mr-2 mb-2 btn-link text-default">Default</a> <a href="#" class="btn mr-2 mb-2 btn-link text-primary">Primary</a> <a href="#" class="btn mr-2 mb-2 btn-link text-secondary">Secondary</a> <a href="#" class="btn mr-2 mb-2 btn-link text-tertiary">Tertiary</a> <a href="#" class="btn mr-2 mb-2 btn-link text-info">Info</a> <a href="#" class="btn mr-2 mb-2 btn-link text-success">Success</a> <a href="#" class="btn mr-2 mb-2 btn-link text-warning">Warning</a> <a href="#" class="btn mr-2 mb-2 btn-link text-danger">Danger</a> <a href="#" class="btn mr-2 mb-2 btn-link text-dark">Dark</a> <a href="#" class="btn mr-2 mb-2 btn-link text-gray">Gray</a> <a href="#" class="btn mr-2 mb-2 btn-link text-light">Light</a> <!--End Of Buttons--> </div> <div class="row"> <div class="col-lg-4 col-md-6"> <!-- Button Social --> <div class="mb-3 mt-5"> <small class="text-uppercase font-weight-bold">Social Buttons</small> </div> <button class="btn mr-2 mb-2 btn-icon btn-twitter" type="button"> <span class="btn-inner-icon"><i class="fab fa-twitter"></i></span> <span class="btn-inner-text">Login with Twitter</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-facebook" type="button"> <span class="btn-inner-icon"><i class="fab fa-facebook-f"></i></span> <span class="btn-inner-text">Login with Facebook</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-dropbox" type="button"> <span class="btn-inner-icon"><i class="fab fa-dropbox"></i></span> <span class="btn-inner-text">Sync with Dropbox</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-dribbble" type="button"> <span class="btn-inner-icon"><i class="fab fa-dribbble"></i></span> <span class="btn-inner-text">Follow @pixel</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-instagram" type="button"> <span class="btn-inner-icon"><i class="fab fa-instagram"></i></span> <span class="btn-inner-text">Follow on Instagram</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-pinterest" type="button"> <span class="btn-inner-icon"><i class="fab fa-pinterest-p"></i></span> <span class="btn-inner-text">Share on Pinterest</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-youtube" type="button"> <span class="btn-inner-icon"><i class="fab fa-youtube"></i></span> <span class="btn-inner-text">Watch on YouTube</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-slack" type="button"> <span class="btn-inner-icon"><i class="fab fa-slack-hash"></i></span> <span class="btn-inner-text">Add to Slack</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-github" type="button"> <span class="btn-inner-icon"><i class="fab fa-github-alt"></i></span> <span class="btn-inner-text">Login with GitHub</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-twitch" type="button"> <span class="btn-inner-icon"><i class="fab fa-twitch"></i></span> <span class="btn-inner-text">Subscribe Now</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-paypal" type="button"> <span class="btn-inner-icon"><i class="fab fa-paypal"></i></span> <span class="btn-inner-text">Donate with PayPal</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-behance" type="button"> <span class="btn-inner-icon"><i class="fab fa-behance"></i></span> <span class="btn-inner-text">Follow us</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-reddit" type="button"> <span class="btn-inner-icon"><i class="fab fa-reddit-alien"></i></span> <span class="btn-inner-text">Repost . 457</span> </button> </div> <div class="col-lg-4 col-md-6"> <!-- Button Round Social --> <div class="mb-3 mt-5"> <small class="text-uppercase font-weight-bold">Social Round</small> </div> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-twitter" type="button"> <span class="btn-inner-icon"><i class="fab fa-twitter"></i></span> <span class="btn-inner-text">Login with Twitter</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-facebook" type="button"> <span class="btn-inner-icon"><i class="fab fa-facebook-f"></i></span> <span class="btn-inner-text">Login with Facebook</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-dropbox" type="button"> <span class="btn-inner-icon"><i class="fab fa-dropbox"></i></span> <span class="btn-inner-text">Sync with Dropbox</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-dribbble" type="button"> <span class="btn-inner-icon"><i class="fab fa-dribbble"></i></span> <span class="btn-inner-text">Follow @pixel</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-instagram" type="button"> <span class="btn-inner-icon"><i class="fab fa-instagram"></i></span> <span class="btn-inner-text">Follow on Instagram</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-pinterest" type="button"> <span class="btn-inner-icon"><i class="fab fa-pinterest-p"></i></span> <span class="btn-inner-text">Share on Pinterest</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-youtube" type="button"> <span class="btn-inner-icon"><i class="fab fa-youtube"></i></span> <span class="btn-inner-text">Watch on YouTube</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-slack" type="button"> <span class="btn-inner-icon"><i class="fab fa-slack-hash"></i></span> <span class="btn-inner-text">Add to Slack</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-github" type="button"> <span class="btn-inner-icon"><i class="fab fa-github-alt"></i></span> <span class="btn-inner-text">Login with GitHub</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-twitch" type="button"> <span class="btn-inner-icon"><i class="fab fa-twitch"></i></span> <span class="btn-inner-text">Subscribe Now</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-paypal" type="button"> <span class="btn-inner-icon"><i class="fab fa-paypal"></i></span> <span class="btn-inner-text">Donate with PayPal</span> </button> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-behance" type="button"> <span class="btn-inner-icon"><i class="fab fa-behance"></i></span> <span class="btn-inner-text">Follow us</span> </button> <br> <button class="btn mr-2 mb-2 btn-icon btn-pill btn-reddit" type="button"> <span class="btn-inner-icon"><i class="fab fa-reddit-alien"></i></span> <span class="btn-inner-text">Repost . 457</span> </button> </div> <div class="col-lg-1 col-md-3"> <!-- Square --> <div class="mb-3 mt-5"> <small class="text-uppercase font-weight-bold">Square</small> </div> <button class="btn mr-2 mb-2 btn-icon-only btn-twitter" type="button"> <span class="btn-inner-icon"><i class="fab fa-twitter"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-facebook" type="button"> <span class="btn-inner-icon"><i class="fab fa-facebook-f"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-dropbox" type="button"> <span class="btn-inner-icon"><i class="fab fa-dropbox"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-dribbble" type="button"> <span class="btn-inner-icon"><i class="fab fa-dribbble"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-instagram" type="button"> <span class="btn-inner-icon"><i class="fab fa-instagram"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pinterest" type="button"> <span class="btn-inner-icon"><i class="fab fa-pinterest-p"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-youtube" type="button"> <span class="btn-inner-icon"><i class="fab fa-youtube"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-slack" type="button"> <span class="btn-inner-icon"><i class="fab fa-slack-hash"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-github" type="button"> <span class="btn-inner-icon"><i class="fab fa-github-alt"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-twitch" type="button"> <span class="btn-inner-icon"><i class="fab fa-twitch"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-paypal" type="button"> <span class="btn-inner-icon"><i class="fab fa-paypal"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-behance" type="button"> <span class="btn-inner-icon"><i class="fab fa-behance"></i></span> </button> <br> <button class="btn mr-2 mb-2 btn-icon-only btn-reddit" type="button"> <span class="btn-inner-icon"><i class="fab fa-reddit-alien"></i></span> </button> </div> <div class="col-lg-1 col-md-2"> <!-- Circle --> <div class="mb-3 mt-5"> <small class="text-uppercase font-weight-bold">Circle</small> </div> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-twitter" type="button"> <span class="btn-inner-icon"><i class="fab fa-twitter"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-facebook" type="button"> <span class="btn-inner-icon"><i class="fab fa-facebook-f"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-dropbox" type="button"> <span class="btn-inner-icon"><i class="fab fa-dropbox"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-dribbble" type="button"> <span class="btn-inner-icon"><i class="fab fa-dribbble"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-instagram" type="button"> <span class="btn-inner-icon"><i class="fab fa-instagram"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-pinterest" type="button"> <span class="btn-inner-icon"><i class="fab fa-pinterest-p"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-youtube" type="button"> <span class="btn-inner-icon"><i class="fab fa-youtube"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-slack" type="button"> <span class="btn-inner-icon"><i class="fab fa-slack-hash"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-github" type="button"> <span class="btn-inner-icon"><i class="fab fa-github-alt"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-twitch" type="button"> <span class="btn-inner-icon"><i class="fab fa-twitch"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-paypal" type="button"> <span class="btn-inner-icon"><i class="fab fa-paypal"></i></span> </button> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-behance" type="button"> <span class="btn-inner-icon"><i class="fab fa-behance"></i></span> </button> <br> <button class="btn mr-2 mb-2 btn-icon-only btn-pill btn-reddit" type="button"> <span class="btn-inner-icon"><i class="fab fa-reddit-alien"></i></span> </button> </div> <div class="col-lg-1 col-md-3"> <!-- Icon --> <div class="mb-3 mt-5"> <small class="text-uppercase font-weight-bold">Icon</small> </div> <a href="#" class="btn mr-2 mb-2 btn-link btn-twitter"> <i class="fab fa-twitter"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-facebook"> <i class="fab fa-facebook-f"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-dropbox"> <span><i class="fab fa-dropbox"></i></span> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-dribbble"> <i class="fab fa-dribbble"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-instagram"> <i class="fab fa-instagram"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-pinterest"> <i class="fab fa-pinterest-p"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-youtube"> <i class="fab fa-youtube"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-slack"> <i class="fab fa-slack-hash"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-github"> <i class="fab fa-github-alt"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-twitch"> <i class="fab fa-twitch"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-paypal"> <i class="fab fa-paypal"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-behance"> <i class="fab fa-behance"></i> </a> <br> <a href="#" class="btn mr-2 mb-2 btn-link btn-reddit"> <i class="fab fa-reddit-alien"></i> </a> </div> </div> </div> </div> </div> </div> </body> </html>

Related: See More

Now UI Dashboard Angular
Animated 3d social icon in css3
Animated Radio tab
Bootstrap 4 Animated Dynamic Form

Questions / Comments: