"Circular Social Buttons"
Bootstrap 3.3.0 Snippet by codename065

<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> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-twitter"><i class="fa fa-twitter"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-vimeo"><i class="fa fa-vimeo-square"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-vine"><i class="fa fa-vine"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-vk"><i class="fa fa-vk"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-wechat"><i class="fa fa-wechat"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-wordpress"><i class="fa fa-wordpress"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-xing"><i class="fa fa-xing"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-yahoo"><i class="fa fa-yahoo"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-yelp"><i class="fa fa-yelp"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-youtube"><i class="fa fa-youtube"></i></a> <a href="http://scripteden.com/download/eden-ui/" target="_blank" class="btn-social btn-email"><i class="fa fa-envelope"></i></a> </div> </div> </div>
@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 { ms-transform: scale(1.3); o-transform: scale(1.3); transform: scale(1.3); webkit-transform: scale(1.3); } .btn-social.btn-xs { font-size: 9px; height: 24px; line-height: 13px; margin: 6px 2px; width: 24px; } .btn-social.btn-sm { font-size: 13px; height: 36px; line-height: 18px; margin: 6px 2px; width: 36px; } .btn-social.btn-lg { font-size: 22px; height: 72px; line-height: 40px; margin: 10px 6px; width: 72px; } .btn-behance { background-color: #1769ff; } .btn-behance:hover { background-color: #4a8aff; } .btn-bitbucket { background-color: #205081; } .btn-bitbucket:hover { background-color: #2a69aa; } .btn-codepen { background-color: #76daff; } .btn-codepen:hover { background-color: #a9e8ff; } .btn-deviantart { background-color: #4e6252; } .btn-deviantart:hover { background-color: #657e6a; } .btn-digg { background-color: #000; } .btn-digg:hover { background-color: #1a1a1a; } .btn-dribbble { background-color: #ea4c89; } .btn-dribbble:hover { background-color: #ef7aa7; } .btn-dropbox { background-color: #007ee5; } .btn-dropbox:hover { background-color: #1998ff; } .btn-facebook { background-color: #3b5998; } .btn-facebook:hover { background-color: #4c70ba; } .btn-flickr { background-color: #0063dc; } .btn-flickr:hover { background-color: #107cff; } .btn-foursquare { background-color: #ef4b78; } .btn-foursquare:hover { background-color: #f37a9b; } .btn-github { background-color: #4183c4; } .btn-github:hover { background-color: #689cd0; } .btn-google-plus { background-color: #dd4b39; } .btn-google-plus:hover { background-color: #e47365; } .btn-instagram { background-color: #3f729b; } .btn-instagram:hover { background-color: #548cb9; } .btn-jsfiddle { background-color: #4679bd; } .btn-jsfiddle:hover { background-color: #6c94ca; } .btn-lastfm { background-color: #e31b23; } .btn-lastfm:hover { background-color: #e9484e; } .btn-linkedin { background-color: #0976b4; } .btn-linkedin:hover { background-color: #0b96e5; } .btn-paypal { background-color: #253b80; } .btn-paypal:hover { background-color: #304da8; } .btn-pinterest { background-color: #cc2127; } .btn-pinterest:hover { background-color: #e04046; } .btn-reddit { background-color: #ff4500; } .btn-reddit:hover { background-color: #ff6a33; } .btn-skype { background-color: #00aff0; } .btn-skype:hover { background-color: #24c4ff; } .btn-soundcloud { background-color: #f80; } .btn-soundcloud:hover { background-color: #ffa033; } .btn-stack-overflow { background-color: #fe7a15; } .btn-stack-overflow:hover { background-color: #fe9748; } .btn-steam { background-color: #7da10e; } .btn-steam:hover { background-color: #a1d012; } .btn-stumbleupon { background-color: #eb4924; } .btn-stumbleupon:hover { background-color: #ef7053; } .btn-trello { background-color: #256a92; } .btn-trello:hover { background-color: #2f88bb; } .btn-tumblr { background-color: #35465c; } .btn-tumblr:hover { background-color: #485f7c; } .btn-twitch { background-color: #6441a5; } .btn-twitch:hover { background-color: #7e5bbe; } .btn-twitter { background-color: #55acee; } .btn-twitter:hover { background-color: #83c3f3; } .btn-vimeo { background-color: #1ab7ea; } .btn-vimeo:hover { background-color: #49c6ee; } .btn-vine { background-color: #00b488; } .btn-vine:hover { background-color: #00e7af; } .btn-vk { background-color: #45668e; } .btn-vk:hover { background-color: #587fae; } .btn-wechat { background-color: #98d11c; } .btn-wechat:hover { background-color: #afe53b; } .btn-wordpress { background-color: #21759b; } .btn-wordpress:hover { background-color: #2a95c5; } .btn-xing { background-color: #026466; } .btn-xing:hover { background-color: #039598; } .btn-yahoo { background-color: #400191; } .btn-yahoo:hover { background-color: #5601c4; } .btn-yelp { background-color: #af0606; } .btn-yelp:hover { background-color: #e00808; } .btn-youtube { background-color: #e52d27; } .btn-youtube:hover { background-color: #ea5955; } .btn-email { background-color: #44c456; } .btn-email:hover { background-color: #6bd079; }

Related: See More


Questions / Comments: