"Graffitistreet Social Buttons"
Bootstrap 3.2.0 Snippet by ashutosh123

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <!--Pulling Awesome Font --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="socials"> <div class="col-sm-3" style="background-color:#3C5A99;height:100px;"> <a href="http://www.facebook.com/graffitistreet" class="icoSocial" title="Facebook"><i class="fa fa-facebook"></i><div class="social-text">LIKE US</div></a> </div> <div class="col-sm-3" style="background-color:#55ACEE;height:100px;"> <a href="https://twitter.com/graffitistreet" class="icoSocial" title="Twitter"><i class="fa fa-twitter"></i><div class="social-text">FOLLOW US</div></a> </div> <div class="col-sm-3" style="background-color:#A98469;height:100px;"> <a href="http://instagram.com/graffitistreet/" class="icoSocial" title="Instagram"><i class="fa fa-instagram"></i><div class="social-text">BEHIND THE SCENES</div></a> </div> <div class="col-sm-3" style="background-color:#0274B3;height:100px;"> <a href="#" class="icoSocial" title="Linkedin"><i class="fa fa-linkedin"></i><div class="social-text">CONNECT WITH US</div></a> </div> </div> </div> </div> </body> </html>
.test{ color: white; } .icoSocial{ color:white; display: block; } .socials{ font-size: 60px; color: #fff; overflow: hidden; text-align:center; vertical-align: middle; } .icoSocial:hover i, .triggeredHover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; -ms-transition: all 0.4s; transition: all 0.4s; color: #fff; } .icoSocial 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; } .social-text{ color: transparent; font-size: 14px; margin-top: -10px; font-weight: bold; } .icoSocial:hover .social-text, .triggeredHover { text-decoration:none; color: #fff; transition: all 0.8s; } .icoSocial .social-text {transition: all 0.8s;} .icoSocial z:before{ content:"LIKE US"; font-size: 14px; margin-top: -10px; font-weight: bold; } .socials a:hover, .socials a:visited, .socials a:link, a:active { text-decoration: none; }

Related: See More

Now UI Kit Angular
Bootstrap Social Card
Navbar with Social icon & Dropdown
social network layout - bootstrap 4

Questions / Comments: