<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<div class="col-md-6 social-buttons-demo">
<h3><small> Bootstrap Social Icons </small></h3>
<button class="btn btn-twitter">
<i class="fa fa-twitter"></i> Connect with Twitter
</button><br>
<button class="btn btn-facebook">
<i class="fa fa-facebook"></i> Share · 2.2k
</button><br>
<button class="btn btn-gplus">
<i class="fa fa-google-plus"></i> Share on Google+
</button><br>
<button class="btn btn-linkedin">
<i class="fa fa-linkedin"></i> Connect with Linkedin
</button><br>
<button class="btn btn-pinterest">
<i class="fa fa-pinterest"></i> Pint it · 212
</button><br>
<button class="btn btn-youtube">
<i class="fa fa-youtube-play"></i> View on Youtube
</button><br>
<button class="btn btn-tumblr">
<i class="fa fa-tumblr-square"></i> Repost
</button><br>
<button class="btn btn-github">
<i class="fa fa-github"></i> Connect with Github
</button><br>
<button class="btn btn-behance">
<i class="fa fa-behance-square"></i> Follow us
</button><br>
<button class="btn btn-dribbble">
<i class="fa fa-dribbble"></i> Find us on Dribble
</button><br>
<button class="btn btn-reddit">
<i class="fa fa-reddit"></i> Repost · 232
</button><br>
</div>
</div>
</div>
body{
padding: 50px 0;
}
.btn{
border: none;
outline: 0;
overflow:hidden;
position: relative;
border-radius: 3px;
position: relative;
padding: 12px 30px;
margin: 10px 1px;
font-size: 12px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0;
color: #FFF;
will-change: box-shadow, transform;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12);
}
.btn .fa{
font-size: 14px;
margin-right: 5px;
}
.btn-twitter{
background-color: #55ACEE;
}
.btn-facebook{
background-color: #3B5998;
}
.btn-gplus{
background-color: #DD4B39;
}
.btn-linkedin{
background-color: #0976B4;
}
.btn-pinterest{
background-color: #CC2127;
}
.btn-youtube{
background-color: #E52D27;
}
.btn-tumblr{
background-color: #35465C;
}
.btn-github{
background-color: #333333;
}
.btn-behance{
background-color: #1769FF;
}
.btn-dribbble{
background-color: #EA4C89;
}
.btn-reddit{
background-color: #FF4500;
}
.btn:hover{
box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.2), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.1);
}
