Botones para compartir redes sociales con efecto

Ya vimos unos botones flotantes deslizantes para compartir en redes sociales , luego otros que se detienen y flotan al hacer scroll, también otros botones flotantes simples para compartir. Ahora vamos a ver otros que son realmente más estéticos, a menos a mi parecer y que de muy sencilla colocación. Como siempre, primero les dejo el ejemplo para que vean de lo que les estoy hablando y luego les explico cómo hacerlo.

Bien, si les gustó entonces vamos a hacer lo siguiente. Primero vamos a la edición HTML de nuestra plantilla y colocamos antes de ]]></b:skin> pegamos los estilos:

/* Botones de redes sociales */

.fb-icon, .gp-icon, .t-icon, .rss-icon {
    -moz-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
    border: 3px solid #FFFFFF;
    border-radius: 40px;
    float: left;
    height: 40px;
    margin: 0 7px 0 0;
    opacity: 0.8;
    width: 40px;
}

.fb-icon:hover, .gp-icon:hover, .t-icon:hover, .rss-icon:hover {
    border-radius: 0;
    opacity: 1;
}
.fb-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbC72mfwF9qlKvVhTXso-QDsTs5qNvSIbrkF03GF7v-yHIJsyo78Her4li0Pw7zIAiTUI4VIvgI9ieJz3XUuBxmyXitLnYceb63KIeAqSgO-WlxXHoYbgow3J7ILu0XCo-FqmAXXg1oOh/h120/f-logo.jpg") no-repeat scroll 0 0 transparent}
.gp-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdKvbgkuHXegZ3qcK3DNggJBlhjnpwcjdFR4j9n_XpYcaQudellEFBXYqfu_rdxNE7_LqsuFofqUwrrv2nHo-WCg-20Lj3RgMDa-kYW0PPC20QEFjBLA2iiLwdZZ-IpCN_YFPJ9gwT2JZ/h120/g-logo.jpg") no-repeat scroll 0 0 transparent}
.t-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBiCYe6MGxdfZ13vS3r1JKB4_3mQalgHfCZ1R6N7R_dx8iXMLtSZIsqJ6KBH6nZ6t7sb29az_iY1EJXkqKiYbvpDoyP6BQRwiPdtbXnqDnlaFO6r3eUAN78psrIt9VHkjx6wM4NjCHENO/h120/t-logo.jpg") no-repeat scroll 0 0 transparent}
.rss-icon{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrSGjryO3fq3rlf8Cgfq3kjuf_G3kOghewqYPQtDal-c8gvqujcxqMMpIZ4KJeJGCfqJHOuQWSoML3R7O7ge_OVCIWBgrV315xRZUz_MWTBX5O2xLoulYuiLcfP9ngm3O3uVt4JynOR_-7/h120/rss-logo.jpg") no-repeat scroll 0 0 transparent}

/* Acá termina Botones de redes sociales */

Guardamos los cambios y abrimos el gadget HTML/Javascript donde queremos que se vean los botones y pegamos el siguiente código:

<div id='contenido-social'>
<a class='fb-icon' href='URL de tu Facebook'/>
<a class='gp-icon' href='URL de cuenta de Google+'/>
<a class='t-icon' href='URL de cuenta de Twitter'/>
<a class='rss-icon' href='URL de RSS'/>
</a></a></a></a></div>

Listo, ahora sólo reemplacen lo que está en rojo por sus URL's y listo, disfruten de sus elegantes botones :) Saludos.