<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">@charset "utf-8";@import url(http://weloveiconfonts.com/api/?family=entypo);[class*="entypo-"]:before { font-family: 'entypo', sans-serif;}#social-sidebar a { text-decoration: none; }#social-sidebar ul { list-style: none; margin: 0; padding: 0;}#social-sidebar { left: 0; margin-top: -75px; position: fixed; top: 50%;}#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }#social-sidebar ul li a { background: #a2a1a1; color: #fff; display: block; height: 50px; font-size: 18px; line-height: 50px; position: relative; text-align: center; width: 50px;}#social-sidebar ul li a:hover span { left: 130%; opacity: 1;}#social-sidebar ul li a span { border-radius: 3px; line-height: 24px; left: -100%;
margin-top: -16px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0 ); opacity: 0; padding: 4px 8px; position: absolute; -webkit-transition: opacity .3s, left .4s; -moz-transition: opacity .3s, left .4s; -ms-transition: opacity .3s, left .4s; -o-transition: opacity .3s, left .4s; transition: opacity .3s, left .4s; top: 50%; z-index: -1;}#social-sidebar ul li a span:before { content: ""; display: block; height: 8px; left: -4px; margin-top: -4px; position: absolute; top: 50%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 8px; z-index: -2;}?
#social-sidebar ul li a:hover,
#social-sidebar ul li a span,
#social-sidebar ul li a span:before { background: #c9c8c8; }
span:before
?
{ background: #f57b05; }
?
</style>
</head>
<body>
<div id="social-sidebar">
<ul>
</ul> </div>
</body>
</html>
creat SOCIAL tool