Botones Redes Sociales
by DanielSTh
HTML
<!-- Creado por DanielSTh -->
<div class="share-box">
<a class="facebook" href="" target="_blank" ><i class="fb"></i><span>Facebook</span></a>
<a class="twitter" href="" target="_blank" ><i class="tw"></i><span>Twitter</span></a>
<a class="youtube" href="" target="_blank" ><i class="yt"></i><span>YouTube</span></a>
<a class="pinterest" href="" target="_blank" ><i class="pint"></i><span>Pinterest</span></a>
<a class="gplus" href="" target="_blank" ><i class="plus"></i><span>Google+</span></a>
</div>CSS
body{color:red;background: #F7F7F7 url(http://s5.postimg.org/4x3wmq4hj/bg1.png);width: 40%;margin: 40px auto;}
/*Diseñado por DanielSTh*/
.share-box{background:rgba(161, 161, 161, 0.3); padding:5px;padding-bottom:0px;}
.share-box:after {content:" ";position:absolute;top:-10px;left:30px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #FCFCFC;}
.share-icon:hover .hidden-box {bottom: -230px;right: -187px;display:block;}
.share-box .share-title {font-size:16px;color:#888;margin:0 0 10px;display:inline-block;}
.share-box a {font-size: 14px;height: 40px;margin-bottom: 5px;text-align: left;width: 100%;border:none;padding: 0;border-radius: 3px;color: #FFF;cursor: pointer;font-weight: 200;transition:all 0.3s;display:inline-block;text-decoration:none;font-family:Century Gothic,Calibri , Arial;}
.share-box a:hover {box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);margin-left: 5px ; }
.share-box a:focus{outline: none;padding-left:5px;}
.share-box span {vertical-align: middle;margin-left: 10px;);letter-spacing: 7px;}
.share-box i{box-shadow:0 0 1px rgba(0, 0, 0, 0.4);border-radius: 3px 0 0 3px;}
.share-box i.fb {vertical-align: middle;background-color:#304981;background-image: url("http://s2.postimg.org/44szsxpqd/Fb_Ico_DSTh.gif");display: inline-block;height: 40px;width: 40px;}
.share-box i.yt {background-color: #24A5D2;background-image: url("http://s2.postimg.org/p5j1dut8l/YT_Ico_DSTh.gif");
display: inline-block;height: 40px;width: 40px;vertical-align: middle;}
.share-box i.pint {background-color: #24A5D2;background-image: url("http://s2.postimg.org/zd1kq9fgl/Pine_Ico_DSTh.gif");
display: inline-block;height: 40px;width: 40px;vertical-align: middle;}
.share-box i.tw {background-color: #24A5D2;background-image: url("http://s2.postimg.org/x9r5ilfnp/Tw_Ico_DSTh.gif");
display: inline-block;height: 40px;width: 40px;vertical-align: middle;}
.share-box i.plus{background-color: #d25124;background-image:...