Fixed Vertical Social Share Button

How To Create Fixed Position Share Box Using CSS

<ul class='social'>
    <li> <a class="fa fa-facebook" href="http://www.jquery2dotnet.com">
      <span>Facebook</span>
    </a> 
    </li>
    <li> <a class="fa fa-twitter" href="http://www.jquery2dotnet.com">
      <span>Twitter</span>
    </a>

    </li>
    <li> <a class="fa fa-dribbble" href="http://www.jquery2dotnet.com">
      <span>Dribbble</span>
    </a>

    </li>
    <li> <a class="fa fa-google-plus" href="http://www.jquery2dotnet.com">
    <span>Google Plus</span>
    </a> 
    </li>
</ul>

.social{position:fixed;top:30px;left:0;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;-webkit-user-select:none;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none}
.social li a{position:relative;width:40px;background:#222;border-bottom:1px solid #333;font:normal normal normal 16px/20px Electrolize, Helvetica, Arial, sans-serif;color:#fff;-webkit-font-smoothing:antialiased;text-decoration:none;text-align:center;-webkit-transition:background .5s ease .300ms;-moz-transition:background .5s ease .300ms;-o-transition:background .5s ease .300ms;transition:background .5s ease .300ms;padding:10px}
.social li:first-child a:hover{background:#3b5998}
.social li:nth-child(2) a:hover{background:#00acee}
.social li:nth-child(3) a:hover{background:#ea4c89}
.social li:nth-child(4) a:hover{background:#dd4b39}
.social li:first-child a{-webkit-border-radius:0 5px 0 0;-moz-border-radius:0 5px 0 0;border-radius:0 5px 0 0}
.social li:last-child a{-webkit-border-radius:0 0 5px 0;-moz-border-radius:0 0 5px;border-radius:0 0 5px 0}
.social li a span{width:100px;float:left;text-align:center;background:#222;color:#fff;-webkit-transform-origin:0;-moz-transform-origin:0;transform-origin:0;visibility:hidden;opacity:0;-webkit-transform:rotateY(45deg);-moz-transform:rotateY(45deg);transform:rotateY(45deg);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-transition:all .2s ease-in .300ms;-moz-transition:all .2s ease-in .300ms;-o-transition:all .2s ease-in .300ms;transition:all .2s ease-in .300ms;margin:-25px 74px;padding:8px}
.social li span:after{content:'';display:block;width:0;height:0;position:absolute;left:-20px;top:7px;border-left:10px solid transparent;border-right:10px solid #222;border-bottom:10px solid transparent;border-top:10px solid transparent}
.social li a:hover span{visibility:visible;opacity:1;-webkit-transform:rotateY(0);-moz-transform:rotateY(0);transform:rotateY(0)}

DEMO