"Circular Social Buttons"
Bootstrap 3.3.0 Snippet by codename065

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
<br/><br/>
<div class="col-md-12">
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-behance"><i class="fa fa-behance"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-bitbucket"><i class="fa fa-bitbucket"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-codepen"><i class="fa fa-codepen"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-deviantart"><i class="fa fa-deviantart"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-digg"><i class="fa fa-digg"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-dribbble"><i class="fa fa-dribbble"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-dropbox"><i class="fa fa-dropbox"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-facebook"><i class="fa fa-facebook"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-flickr"><i class="fa fa-flickr"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-foursquare"><i class="fa fa-foursquare"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-github"><i class="fa fa-github-alt"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-google-plus"><i class="fa fa-google-plus"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-instagram"><i class="fa fa-instagram"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-jsfiddle"><i class="fa fa-jsfiddle"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-lastfm"><i class="fa fa-lastfm"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-linkedin"><i class="fa fa-linkedin"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-paypal"><i class="fa fa-paypal"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-pinterest"><i class="fa fa-pinterest"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-reddit"><i class="fa fa-reddit"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-skype"><i class="fa fa-skype"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-soundcloud"><i class="fa fa-soundcloud"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-stack-overflow"><i class="fa fa-stack-overflow"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-steam"><i class="fa fa-steam"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-stumbleupon"><i class="fa fa-stumbleupon"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-trello"><i class="fa fa-trello"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-tumblr"><i class="fa fa-tumblr"></i></a>
<a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-twitch"><i class="fa fa-twitch"></i></a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
a.btn-social,
.btn-social
{
border-radius: 50%;
color: #ffffff !important;
display: inline-block;
height: 54px;
line-height: 54px;
margin: 8px 4px;
text-align: center;
text-decoration: none;
transition: background-color .3s;
webkit-transition: background-color .3s;
width: 54px;
}
.btn-social .fa,.btn-social i
{
backface-visibility: hidden;
moz-backface-visibility: hidden;
ms-transform: scale(1);
o-transform: scale(1);
transform: scale(1);
transition: all .25s;
webkit-backface-visibility: hidden;
webkit-transform: scale(1);
webkit-transition: all .25s;
}
.btn-social:hover,.btn-social:focus
{
color: #fff;
outline: none;
text-decoration: none;
}
.btn-social:hover .fa,.btn-social:focus .fa,.btn-social:hover i,.btn-social:focus i
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard
Bootstrap Social Card
Navbar with Social icon & Dropdown
social network layout - bootstrap 4

Questions / Comments: