<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/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> <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"> <div class="share-it"> <div class="facebook"> <a href="#"><i class="fa fa-facebook"></i></a> </div> <div class="twitter"> <a href="#"><i class="fa fa-twitter"></i></a> </div> <div class="google hidden-xs"> <a href="#"><i class="fa fa-google-plus"></i></a> </div> <div class="rss"> <a href="#"><i class="fa fa-rss"></i></a> </div> <div class="linkedin"> <a href="#"><i class="fa fa-linkedin"></i></a> </div> <div class="youtube cboxElement"> <a href="#"><i class="fa fa-youtube"></i></a> </div> </div> </div> </div>

.share-it{ position:fixed; min-height:200px; width:40px; background:#fff; right:0; z-index:9; top:40%; } .share-it i{ font-size:16px; } .facebook{margin:0 auto; float:left; margin-right:4px;} .facebook a{ color:#fff; padding:10px 16px; background-color:#527aba; display:inline-block; transition:0.5s ease; } .facebook a:hover{ color:#fff; padding:10px 20px; margin-left:-20px; background-color:#527aba; display:inline-block; } .twitter{margin:0 auto; float:left; margin-right:4px;} .twitter a{ color:#fff; padding:10px 16px; background-color:#77cdf1; display:inline-block; text-align:center; transition:0.5s ease; } .twitter a:hover{ color:#fff; padding:10px 20px; margin-left:-20px; background-color:#77cdf1; display:inline-block; text-align:center; } .google{margin:0 auto; float:left; margin-right:4px;} .google a{ color:#fff; padding:10px 16px; background-color:#4c4c4c; display:inline-block; transition:0.5s ease; } .google a:hover{ color:#fff; padding:10px 20px; margin-left:-20px; background-color:#4c4c4c; display:inline-block; } .rss{margin:0 auto; float:left; margin-right:4px;} .rss a{ color:#fff; padding:10px 16px; background-color:#fe8f19; display:inline-block; transition:0.5s ease; } .rss a:hover{ color:#fff; padding:10px 20px; margin-left:-20px; background-color:#fe8f19; display:inline-block; } .linkedin{margin:0 auto; float:left; margin-right:4px;} .linkedin a{ color:#fff; padding:10px 16px; background-color:#157ecc; display:inline-block; transition:0.5s ease; } .linkedin a:hover{ color:#fff; padding:10px 20px; margin-left:-20px; background-color:#157ecc; display:inline-block; } .youtube{margin:0 auto; float:left; margin-right:4px;} .youtube a{ color:#fff; padding:10px 16px; background-color:#fe322f; display:inline-block; transition:0.5s ease; } .youtube a:hover{ color:#fff; padding:10px 20px; margin-left:-20px; background-color:#fe322f; display:inline-block; transition:0.3s ease; }