Haciendo uso nuevamente de la propiedad
img class="redondeado" expuesta por
El Potro tiempo atras hoy he creado unos iconos de suscripciones con bordes redondeados que al pasar el cursor sobre ellos despliegan un bello efecto.
A continuacion una imagen de como funciona el truco.
Para agregar este truco a tu blog pega antes de
]]></b:skin> el siguiente codigo:
.redondeado {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.redondeado:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
Ahora en un elemento
HTML/JavaScript pega lo siguiente :
<div class="ads">
<a href="URL DE TU FACEBOOK" target="_blank" title="¡Facebook!"><img class="redondeado" src="https://lh4.googleusercontent.com/-0hUixh9TKyw/T6alkKrFE8I/AAAAAAAABBM/FMtrAx3B8IE/s128/Facebook.png" /></a>
<a href="URL DE TU TWITTER" target="_blank" title="¡Twitter!"><img class="redondeado" src="https://lh5.googleusercontent.com/-N7XdfGjLqA4/T6amHrDYTyI/AAAAAAAABBY/cGd_zpnuAD0/s128/Twitter.png" /></a>
<a href="URL DE TU YOUTUBE" target="_blank" title="¡YouTube!"><img class="redondeado" src="https://lh5.googleusercontent.com/-psvB6b_3wq4/T6amU-6rxrI/AAAAAAAABBg/Z5QtWTAnBdE/s128/Youtube.png" /></a>
<a href="URL DE TU RSS" target="_blank" title="¡RSS!"><img class="redondeado" src="https://lh5.googleusercontent.com/-Fhq5cY_R-js/T6alkHGGpeI/AAAAAAAABBI/Ff9jAB9El-w/s128/RSS.png" /></a>
</div>
Para finalizar solo debes cambiar lo que resalte en color azul por la URL de tus cuentas y listo.