"Social Buttons"
Bootstrap 4.0.0 Snippet by richbnak7

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <ul class="social-btns center-block"> <li><button class="btn btn-facebook"><i class="fa fa-facebook pull-left" aria-hidden="true"></i>Sign in with Facebook</button></li> <li><button class="btn btn-twitter"><i class="fa fa-twitter pull-left" aria-hidden="true"></i>Sign in with Twitter</button></li> <li><button class="btn btn-linkedin"><i class="fa fa-linkedin pull-left" aria-hidden="true"></i>Sign in with Linkedin</button></li> <li><button class="btn btn-google"><i class="fa fa-google-plus pull-left" aria-hidden="true"></i>Sign in with Google</button></li> <li><button class="btn btn-tumblr"><i class="fa fa-tumblr pull-left" aria-hidden="true"></i>Sign in with Tumblr</button></li> <li><button class="btn btn-pinterest"><i class="fa fa-pinterest-p pull-left" aria-hidden="true"></i>Sign in with Pinterest</button></li> </ul> </div> </div>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"); .social-btns{ font-size: 22px; list-style: none; } .social-btns li{ margin-bottom: 5px; } .social-btns li i{ font-size: 22px; } .social-btns .btn-facebook { background-color: #38519f; border-color: #293b75; color: #ffffff; min-width: 250px; } .social-btns .btn-facebook:hover { color: #ffffff; background-color: #293b75; } .social-btns .btn-twitter { background-color: #00a8fa; border-color: #048cce; color: #ffffff; min-width: 250px; } .social-btns .btn-twitter:hover { color: #ffffff; background-color: #048cce; } .social-btns .btn-linkedin { background-color: #00629e; border-color: #044a75; color: #ffffff; min-width: 250px; } .social-btns .btn-linkedin:hover { color: #ffffff; background-color: #044a75; } .social-btns .btn-google { background-color: #df270b; border-color: #a01b03; color: #ffffff; min-width: 250px; } .social-btns .btn-google:hover { color: #ffffff; background-color: #a01b03; } .social-btns .btn-tumblr{ background-color: #274665; border-color: #182b3d; color: #ffffff; min-width: 250px; } .social-btns .btn-tumblr:hover { color: #ffffff; background-color: #182b3d; } .social-btns .btn-pinterest{ background-color: #cc0000; border-color: #9b0404; color: #ffffff; min-width: 250px; } .social-btns .btn-pinterest:hover { color: #ffffff; background-color: #9b0404; }

Related: See More


Questions / Comments: