Efecto CSS3 en botones de r. sociales

Me siento muy agusto de trabajar por primera vez con CSS3 en cuestion de efectos, y me llevo una buena experiencia ya que me agrado muchisimo todo los recursos que encuentro en el, y seria buena idea compartir con ustedes un efecto que en lo personal me llamo mucho la atencion ya que se ve de maravilla. Este efecto lo vamos a emplear en los botones/imagenes de las redes sociales.

Como ya lo habia mencionado de eso se tratara este articulo de poner los botones de las redes sociales pero con un efecto de iluminacion y presentacion al pasar el cursor sobre cada uno de los botones.

Voy a empezar poniendo los botones de las redes sociales mas conocidas que son Facebook, Twitter y Youtube sin duda en estas tres redes esta nuestra web, y al pasar el cursor los botones se iluminaran y aumentaran su tamaño para resaltar como se muestra a continuacion:

Y bueno lo primero que vamos a hacer es pegar es el efecto de resaltacion css3, recuerden que esto es un codigo css3 y lo deven pegar en CSS-CODE

.efectors{
display:block!important;
-webkit-transition:-webkit-transform 1s ease-out;
-moz-transition:-moz-transform 1s ease-out;
-o-transition:-o-transform 1s ease-out;
-ms-transition:-ms-transform 1s ease-out;
transition:transform 1s ease-out;
}

.efectors:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1)
}

Ya pegado el efecto css3, lo siguiente es pegar la iluminacion de los botones, para esto ulilizaremos una opacacion css, recuerden que esto es un codigo css y lo deven pegar en CSS-CODE

.opacity img {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;}

.opacity:hover img {
filter:alpha(opacity=110);
-moz-opacity: 1.1;
opacity: 1.1;
}

Y por ultimo... para poder usar esos efectos en los botones de las redes sociales utilizaremos dos "class" uno para iluminar y el otro para el efecto css3, incluyendo un margen y una flotacion en las imagenes justo asi: Recuerden que esto es un codigo HTML

<div class="opacity"><a target="_blank" href="URL DE TU FACEBOOK"><img class="efectors" style="float:left; margin:10px; width:128px; height:128px;" alt="" src="URL IMAGEN FACEBOOK" /></a></div>

<div class="opacity"><a target="_blank" href="URL DE TU YOUTUBE"><img class="efectors" style="float:left; margin:10px; width:128px; height:128px;" alt="" src="URL IMAGEN YOUTUBE" /></a></div>

<div class="opacity"><a target="_blank" href="URL DE TU TWITTER"><img class="efectors" style="float:left; margin:10px; width:128px; height:128px;" alt="" src="URL IMAGEN TWITTER" /></a></div>

Y asi nuestros botones se veran elegantes y a la vez con un efecto que se ve de maravilla, y lo mejor es que no utilizamos ningun script, asi que con eso nos damos cuenta que los efectos css3 estan dejando atras los scripts de diseño.