Botones de Redes Sociales con efecto de opacidad

Las redes sociales son uno de los metodos más efectivos para difundir nuestro contenido y llegar a más gente, por ello es que tener cuentas en las más populares redes sociales es indispensable y un punto clave en la popularidad de nuestro blog.

Teniendo en cuenta esto he creado unos botones sociales muy elegantes y prácticos, al momento de pasar el cursor sobre las imagenes se ve un hermoso efecto de opacidad que se logra con un pequeño codigo CSS.

Puedes ver los botones a continuación.

FacebookGoogle PlusTwitter


Para agregar estos botones pega en un elemento HTML/Javascript lo siguiente:

 <div id='social'>
<a href='URL FACEBOOK' target="_blank"><img alt='Facebook' src='http://www.miltrucosblogger.com/wp-content/uploads/2013/02/facebook-boton-300x58.png' title='Facebook'/></a>
<a href='URL GOOGLE+' target="_blank"><img alt='Google Plus' src='http://www.miltrucosblogger.com/wp-content/uploads/2013/02/Google-boton002-300x58.png' title='Google Plus'/></a>
<a href='URL TWITTER' target="_blank"><img alt='Twitter' src='http://www.miltrucosblogger.com/wp-content/uploads/2013/02/Twitter-boton003-300x58.png' title='Twitter'/></a></div>

Con esto hemos agregado la estructura HTML, deberas cambiar la parte resaltada en color azul por lo que se indica en cada caso correspondiente.

Ahora solo queda agregar el CSS con el que se lograra el efecto de opacidad, para esto agrega antes de  ]]></b:skin> lo siguiente:

#social img:hover {
 opacity: 0.6;
 }

Ahora si hemos terminado con todo el código y ha quedado listo el truco, espero que te haya sido de mucha utilidad.

Con el apoyo de  Chat adventista

0
Shares

34 thoughts on “Botones de Redes Sociales con efecto de opacidad

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *