<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="wrap"> <div class="social"> <i class="icon-facebook fb"></i> <i class="icon-twitter tw"></i> <i class="icon-youtube yt"></i> <i class="icon-dribble dr"></i> <i class="icon-skype sk"></i> <i class="icon-dropbox db"></i> <i class="icon-apple apple"></i> </div> </div>

@-webkit-keyframes wiggle { 0% { -webkit-transform: rotateZ(2deg); transform: rotateZ(2deg); } 50% { -webkit-transform: rotateZ(-2deg); transform: rotateZ(-2deg); } 100% { -webkit-transform: rotateZ(2deg); transform: rotateZ(2deg); } } *, *::before, *::after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } .wrap { width: 35%; margin: 100px auto; text-align: center; } .social { font-size: 2.5em; height: 50px; overflow: hidden; border-bottom: 1px solid #abc; } i { position: relative; top: 30px; margin: 0 10px; -webkit-transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 100ms cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */ } i:hover { top: 5px; } .fb { color: #3B5998; } .tw { color: #09AEEC; } .yt { color: #AA2A25; } .dr { color: #ea4c89; } .sk { color: #00A5E6; } .db { color: #000; } .apple { color: #ccc; }