<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="col-md-12 text-center"> <div class="wrapper"> <ul class="social-icons social-circle social-zoom"> <li> <a href="#"><i class="fa fa-facebook fb"></i></a></li> <li> <a href="#"><i class="fa fa-linkedin li"></i></a></li> <li> <a href="#"><i class="fa fa-google-plus gp"></i></a></li> <li> <a href="#"><i class="fa fa-youtube yt"></i></a></li> <li> <a href="#"><i class="fa fa-twitter tw"></i></a></li> </ul> </div> </div> </div>

ul li{display:inline-block; padding: 10px;} ul li a i{ background: #fff; height: 30px; width: 30px; padding: 8px 0 0 0; border-radius: 50%; -moz-box-shadow: 0 0 10px #000000; -webkit-box-shadow: 0 0 10px #000000; box-shadow: 0 0 10px #000000; } ul{margin-top:10px;} ul li a i:hover{transform: translateX(10px) rotate(360deg);} ul li a i.fb:hover{width:50px;height:50px; padding-top: 18px; transition-duration: 1s;background:#3C599F;color:#fff;} ul li a i.li:hover{width:50px;height:50px; padding-top: 18px; transition-duration: 1s;background:#1698e3;color:#fff;} ul li a i.gp:hover{width:50px;height:50px; padding-top: 18px; transition-duration: 1s;background:#CF3D2E;color:#fff;} ul li a i.yt:hover{width:50px;height:50px; padding-top: 18px; transition-duration: 1s;background:#C52F30;color:#fff;} ul li a i.tw:hover{width:50px;height:50px; padding-top: 18px; transition-duration: 1s;background:#32CCFE;color:#fff;}