"Animated Social Media Icons"
Bootstrap 3.3.0 Snippet by uxengineer

<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <h1 class="page-header"> Animated Social Media Icons </h1> <p> You can add the animated social media icons to your website for linking to your social media channels. </p> <br /> <!-- *-*-*-*-*-*-*-*-*-*-*-* ANIMATED ICONS *-*-*-*-*-*-*-*-*-*-*-* --> <div class="col-md-12"> <ul class="social-network social-circle"> <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li> <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li> <li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li> </ul> </div> </div>
/* footer social icons */ ul.social-network { list-style: none; display: inline; margin-left: 0 !important; padding: 0; } ul.social-network li { display: inline; margin: 0 5px; } /* footer social icons */ .social-network a.icoRss:hover { background-color: #F56505; } .social-network a.icoFacebook:hover { background-color: #3B5998; } .social-network a.icoTwitter:hover { background-color: #33ccff; } .social-network a.icoGoogle:hover { background-color: #BD3518; } .social-network a.icoVimeo:hover { background-color: #0590B8; } .social-network a.icoLinkedin:hover { background-color: #007bb7; } .social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, .social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i { color: #fff; } a.socialIcon:hover, .socialHoverClass { color: #44BCDD; } .social-circle li a { display: inline-block; position: relative; margin: 0 auto 0 auto; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; width: 40px; height: 40px; font-size: 20px; } .social-circle li i { margin: 0; line-height: 40px; text-align: center; } .social-circle li a:hover i, .triggeredHover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } .social-circle i { color: #fff; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; } a { background-color: #D3D3D3; }
window.alert = function() {}; var defaultCSS = document.getElementById('bootstrap-css'); function changeCSS(css) { if (css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="' + css + '" type="text/css" />'); else $('head > link').filter(':first').replaceWith(defaultCSS); } $(document).ready(function() { var iframe_height = parseInt($('html').height()); window.parent.postMessage(iframe_height, 'http://bootsnipp.com'); });

Related: See More

Questions / Comments: