content logo

Bootstrap Buttons:

Social Icons with Bootstrap Buttons

Social sharing buttons are scattered everywhere across websites nowadays. They are basically little icons for Twitter, Facebook, Pinterest and other social networks. You could always use the link to navigate people to your social media pages but that is extremely basic and boring. Using buttons is way more intuitive and interesting. Instead of having to copy and paste each link, you can use a button that the users can click on to be taken to the page they need. These buttons seem like such an awesome idea. Well, that is because they are. These social icons can make sharing your content so much easier; however, you need to be careful. These buttons are not used all the time due to bad placement, lack of good designs, etc.

Due to this, we have some social network buttons for you in this post. These are Bootstrap colourful buttons designed to display social network icons. They are available in different sizes and various dimensions so you can use the one fir for your website. These Bootstrap social icons can be placed anywhere in the site either vertically or horizontally. The Bootstrap buttons include platforms such as Twitter, Facebook, Google Plus, and Pinterest. They also have all the vital SEO features to help your website rank better.

#Bootstrap Button #Social Network Buttons #Bootstrap Colorful Buttons #Bootstrap Social Icons

<!-- This script got from www.frontendfreecode.com -->
<div class="sharebuttons btn-group">
	<a href="#" class="btn btn-twitter"><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest"><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div><code>btn-group</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-xs">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>  <code>btn-group-xs</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group btn-group-sm">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div> <code>btn-group-sm</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-lg">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div> <code>btn-group-lg</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-lg btn-group-justified">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>
<code>btn-group-justified</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-vertical">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>
<code>btn-group-vertical</code>
<br>
<hr>
<br>
<div class="sharebuttons btn-group btn-group-lg showtext inline">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> Tweet</a>
	<a href="#" ><i class="fa fa-facebook"></i> Share</a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> Plus 1</a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> Link</a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> Pin</a>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
/* SHAREBUTTONS ========================= */
.sharebuttons a { color: #fff !important; }
.btn-facebook { background: #3b5998;}
.btn-twitter { background: #00acee;}
.btn-google { background: #dd4b39;}
.btn-pinterest { background: #c8232c;}
.btn-linkedin { background: #0e76a8;}
.btn-facebook:hover { background: #2f4679;}
.btn-twitter:hover { background: #0089bd;}
.btn-google:hover { background: #b03b2d;}
.btn-pinterest:hover { background: #9f1b23;}
.btn-linkedin:hover { background: #0b5e85;}
/* ====================== end SHAREBUTTONS */
body {font-size: 1.75em;padding: 40px;} span {display: none;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js'></script>
<style>
/* SHAREBUTTONS ========================= */
.sharebuttons a { color: #fff !important; }
.btn-facebook { background: #3b5998;}
.btn-twitter { background: #00acee;}
.btn-google { background: #dd4b39;}
.btn-pinterest { background: #c8232c;}
.btn-linkedin { background: #0e76a8;}
.btn-facebook:hover { background: #2f4679;}
.btn-twitter:hover { background: #0089bd;}
.btn-google:hover { background: #b03b2d;}
.btn-pinterest:hover { background: #9f1b23;}
.btn-linkedin:hover { background: #0b5e85;}
/* ====================== end SHAREBUTTONS */
body {font-size: 1.75em;padding: 40px;} span {display: none;}
</style>

</head>
<body>
<div class="sharebuttons btn-group">
	<a href="#" class="btn btn-twitter"><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest"><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div><code>btn-group</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-xs">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>  <code>btn-group-xs</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group btn-group-sm">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div> <code>btn-group-sm</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-lg">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div> <code>btn-group-lg</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-lg btn-group-justified">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>
<code>btn-group-justified</code>
<br>
<br>
<div class="sharebuttons btn-group btn-group-vertical">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> <span>Tweet</span></a>
	<a href="#" class="btn btn-facebook" ><i class="fa fa-facebook"></i> <span>Share</span></a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> <span>Plus 1</span></a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> <span>Link</span></a>
	<a href="#" ><i class="fa fa-pinterest"></i> <span>Pin</span></a>
</div>
<code>btn-group-vertical</code>
<br>
<hr>
<br>
<div class="sharebuttons btn-group btn-group-lg showtext inline">
	<a href="#" class="btn btn-twitter" ><i class="fa fa-twitter"></i> Tweet</a>
	<a href="#" ><i class="fa fa-facebook"></i> Share</a>
	<a href="#" class="btn btn-google"><i class="fa fa-google-plus" ></i> Plus 1</a>
	<a href="#" class="btn btn-linkedin"><i class="fa fa-linkedin" ></i> Link</a>
	<a href="#" class="btn btn-pinterest" ><i class="fa fa-pinterest"></i> Pin</a>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>

</body>
</html>
Preview