Iconos Sociales que giran y cambian de color al pasar el cursor con css3

By: Jonathan Lozano on 17:29

Como anteriormente habíamos visto los Iconos Sociales con efecto giratorio este tipo también giran, pero a la vez cambian de color, y vienen en otro diseño y no se necesita modificar la plantilla.

Puedes ver el demo en este blog de pruebas, esta situado en la barra lateral de la derecha

Nos vamos a Diseño → Añadir Gadget → HTML/Javascript y pegamos:

<style type="text/css">
.Soldier-Social img{
border-radius: 50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.Facebook-Social{
-webkit-filter: grayscale(100%);
}
.Facebook-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

.Twitter-Social{
-webkit-filter: grayscale(100%);
}
.Twitter-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.GooglePlus-Social{
-webkit-filter: grayscale(100%);
}
.GooglePlus-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.YouTube-Social{
-webkit-filter: grayscale(100%);
}
.YouTube-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

.RSS-Social{
-webkit-filter: grayscale(100%);
}
.RSS-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>

<div class="Soldier-Social">
<!--Facebook-->
<a href="facebook" target="_blank"><img class="Facebook-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOVMNBAh210clqEhj-C9r-IdkBs4beXFjWjVB_heRkhSMKSHNV4D_g38OnXPuY7yeAj76zZoV38NirtL1DirPYHsZB9fcMdz0Tkkl0qmVin6TwkuFHdPd-q0B7wZlw__PV1n2fxN8s31J/s1600/Facebook.png" width="48" height="48"></a>
<!--Twitter-->
<a href="twitter" target="_blank"><img class="Twitter-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSGrarhcrF76oqy0zWkNrBrq7ozeNlzxcI2sOyA1KyYwXTBAJTMZqbieOlrF08s91XB9yjZpwCTFYad71of4NAWSf5n_HIgxNnCzFE6dVe4lCnEb8DoteX-1sOwPq_nmY2HfRUzwUA4fhb/s1600/Twitter.png" width="48" height="48"></a>
<!--Google Plus-->
<a href="google plus" target="_blank"><img class="GooglePlus-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwpKL_q_zO90N9e0TPKVJ3z0r6oPxaRTEdVLrKLdk7xJmTFJRIe0GyB_5Pnbz_3Ae23aDEB8nGf8BWmD1xe3iJggWfBF4VqZLSNvinxSUu24y0d6p-9GBJNVc1ul0GT0EID-zdWjtrtdVW/s1600/Google-plus.png" width="48" height="48"></a>
<!--Youtube-->
<a href="youtube" target="_blank"><img class="YouTube-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtMt6ZJ012HO-XC-if-FPMWqptyzmWGTiiApDBPAba-5yLpFUm37pd6fjTkN1iz_ty6fIengNpxiTlrXLwQdxBOSJR881DNx02I1ISfM5Ro4BqW5L8_4KFQr7LRExieeLdcFVRawUEHFDV/s1600/Youtube.png" width="48" height="48"></a>
<!--RSS-->
<a href="rss feed" target="_blank"><img class="RSS-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_KeoBjU5aV4kC0fdfymaFBSLyIFayiiDp5MC4y-y8twTGSqf-7xIyatEocXSGka1ZaQlOJs6uA_GnWHAuRBXEbvcVXglyAjPD0ghI4CkgTpbWjshy2euG2zi1BOsrvbll-_0q145J4u3i/s1600/RSS.png" width="48" height="48"></a>
</div>

• Reemplaza lo que esta en azul por el URL que le corresponde
• Puedes cambiar la imagen, solo reemplaza lo que está en rojo por la URL de la imagen. Te recomiendo descargar iconos de Iconfinder.