Social Media Floating Sidebar with CSS
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Floating Sidebar with CSS</title>
<style>
body { background-color: #02c54c ;}
/* Sticky Social Icons */
.sticky-container{ padding:0px; margin:0px; position:fixed; right:-130px;top:230px; width:210px; z-index: 1100;}
.sticky li{list-style-type:none;background-color:#fff;color:#efefef;height:43px;padding:0px;margin:0px 0px 1px 0px; -webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out; cursor:pointer;}
.sticky li:hover{margin-left:-115px;}
.sticky li img{float:left;margin:5px 4px;margin-right:5px;}
.sticky li p{padding-top:5px;margin:0px;line-height:16px; font-size:11px;}
.sticky li p a{ text-decoration:none; color:#2C3539;}
.sticky li p a:hover{text-decoration:underline;}
/* Sticky Social Icons */
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="sticky-container">
<ul class="sticky">
<li>
<img src="img/facebook-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Like Us on<br>Facebook</a></p>
</li>
<li>
<img height="32" src="img/twitter-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Follow Us on<br>Twitter</a></p>
</li>
<li>
<img src="img/gplus-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Follow Us on<br>Google+</a></p>
</li>
<li>
<img src="img/linkedin-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Follow Us on<br>LinkedIn</a></p>
</li>
<li>
<img src="img/youtube-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Subscribe on<br>YouYube</a></p>
</li>
<li>
<img src="img/pin-circle.png" width="32" height="32">
<p><a href="#" target="_blank">Follow Us on<br>Pinterest</a></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
VIDEO
