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.

  

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3h4Wt3yKvYN3hpqqjGZespd-5wrZ4_xZhDEfnSqjPWfShT8NT_xING6G6tkMRbJqUo159kBNWErdTQn-rxMtOYxNEJBrLNG5PhGL-b-37VnLdwdBkD4N2sBT6Zhi3VSPqvWzJitjhe5k/s1600/facebook+boton.png' title='Facebook'/></a>
<a href='URL GOOGLE+' target="_blank"><img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcYDW06s0yVp-0Qv3Ycu7w_iaLwgEeC6bCEFOPQpiF6Lb_Y8B4OTzNYFeXbYATgXSLodWGFxGL05wuWoVKiCfm7RSzAWL4YecLkdfD-CxtgBXYX4szjVu1MD05Fq4Lta49epdKmhrTgTY/s1600/Google+++boton002.png' title='Google Plus'/></a>
<a href='URL TWITTER' target="_blank"><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Z5vJ05btfS2iyeijXIMA_B7qWZsUF8T91ZffxB_FxDBQHprK6L0WHi5lC8kHktzcj4sPoZ812u8Zx5G0a0amjQY9AwIzEA7hQGVfTIfB_Bt58KzphX5xOALg3e1cTxri6n7R-YwQRng/s1600/Twitter+boton003.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.