Botones Sociales CSS Estilo Zanime

Hola amigos, como alguna ya abran notado al darle click a una de las opciones del menu de mi web aparece un cuadro flotante (llamado lightbox) el cual muestran unos botones elegantes apuntando hacia algun sitio o red social, bueno me imagino que a muchas personas les habran gustado estos botones de mi web por lo cual se los comprto para quienes los desean, aunque estos tienen una modificacion para hacerlos mas compatibles y ademas tienen un efecto no igual a los mios pero tampoco diferentes, a continuacion la explicacion:

Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes a css, ejemplo:

<style type="text/css">

...aqui el codigo...

</style>

 En el caso que uses blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edicion html y buscaremos]]></b:skin> ensima de eso ponen esto:

/*logos*/
.icon-social.f-lg {background-position: -28px -2px;}
.icon-social.t-lg {background-position: -3px -2px;}
.icon-social.g-lg {background-position: -58px -1px;}
.icon-social.y-lg {background-position: -92px -1px;}
.icon-social.rss-lg {background-position: -127px -1px;}
.icon-social.sc-lg {background-position: -200px 0px;}
.icon-social.pt-lg {background-position: -164px -1px;}
/*fondos*/
.botones-social > a.f-bg {background-color: #3B5998;}
.botones-social > a.f-bg:hover {background-color: #3764c1;}
.botones-social > a.t-bg {background-color: #45A3BC;}
.botones-social > a.t-bg:hover {background-color: #3db5d5;}
.botones-social > a.g-bg {background-color: #DD6666;}
.botones-social > a.g-bg:hover {background-color: #ff7979;}
.botones-social > a.y-bg {background-color: #A33232;}
.botones-social > a.y-bg:hover {background-color: #c14242;}
.botones-social > a.rss-bg {background-color: #EE9741;}
.botones-social > a.rss-bg:hover {background-color: #ffa64e;}
.botones-social > a.sc-bg {background-color: #555;}
.botones-social > a.sc-bg:hover {background-color: #595959;}
.botones-social > a.pt-bg {background-color: #E7E7E7;color: #555;text-shadow: -1px -1px 0 #FFF;}
.botones-social > a.pt-bg:hover {background-color: #F1F1F1;}

.icon-social {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKJMLkRU2NZ4Kqqc5iKOeMR3gbQbWam1EdS4HIZvEB7ffAcV5mYX33XGhlG4ZTd2pYar8-uCOeBy5S9D0JXIU-XG6mW773raAOpm2IKzuhHEIEF4eLakuRugR9PQBVaiJq5ELZCITpSbth/s1600/icon-social.png");
    border-right: 1px solid rgba(0, 0, 0, 0.27);
    box-shadow: 1px 0 0 rgba(255, 252, 252, 0.27);
    display: block;
    height: 26px;
    left: 3%;
    padding: 0 4px 2px 0;
    position: absolute;
    top: 19%;
    width: 25px;
}

.botones-social > a {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 -3px 0 rgba(0, 0, 0, 0.3) inset, 0 0 10px rgba(255, 255, 255, 0.3) inset, 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    display: inline-block;
    font-family: Arial,Helvetica;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px;
    padding: 1em 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
    width: 330px;
}

.botones-social > a:active {
    top:1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 -2px 0 rgba(0, 0, 0, 0.3) inset, 0 0 10px rgba(255, 255, 255, 0.3) inset, 0 2px 4px rgba(0, 0, 0, 0.2);
}

por ultimo solo agregamos el html correspondiente al boton que queramos, los botones son los siguientes:

<!--Boton Facebook-->
<div class="botones-social">
    <a class="f-bg" href="#">
    Z+Kreations en Facebook
    <i class="icon-social f-lg"></i>
    </a>
</div>

<!--Boton twitter-->
<div class="botones-social">
    <a class="t-bg" href="#">
    Z+Kreations en Twitter    <i class="icon-social t-lg"></i>
    </a>
</div>

<!--Boton Google plus-->
<div class="botones-social">
    <a class="g-bg" href="#">
    Z+Kreations en Google +    <i class="icon-social g-lg"></i>
    </a>
</div>

<!--Boton Youtube-->
<div class="botones-social">
    <a class="y-bg" href="#">
    Z+Kreations en Youtube    <i class="icon-social y-lg"></i>
    </a>
</div>

<!--Boton RSS-->
<div class="botones-social">
    <a class="rss-bg" href="#">
    RSS de Z+Kreations    <i class="icon-social rss-lg"></i>    </a>
</div>

<!--Boton Pinterest-->
<div class="botones-social">
    <a class="pt-bg" href="#">
    Pinterest de Z+Kreations    <i class="icon-social pt-lg"></i>
    </a>
</div>

<!--Boton Soundcloud-->
<div class="botones-social">
    <a class="sc-bg" href="#">
    Soundcloud de Z+Kreations    <i class="icon-social sc-lg"></i>
    </a>
</div>