Iconos sociales con animacion hover oblicua

Utilizando las posibilidades que nos ofrece el CSS3, he diseñado estos geniales iconos sociales. No existe ninguna imagen en su realizacion, para los logos he utilizado un tipo de fuente especial llamada fontawesome. Les he dado forma circular y un fondo degradado utilizando la propiedad linear-gradient, dandoles asi un toque mas elegante. Al pasar el cursor sobre ellos, cambia el color del fondo y de la fuente, produciendo una animacion de abajo a arriba en modo oblicuo. Esto se consigue usando la propiedad transition y con algunas lineas de codigo de estilo mas. Si te gustan y los quieres poner en tu blog o web, elige el modelo que mas te guste y copia el codigo correspondiente, sustituyendo el texto en color rojo por las direcciones url de tus redes sociales y la de tu feed RSS.

(NOTA: Este efecto oblicuo se puede apreciar perfectamente en el navegador Firefox. En otros como Chrome, la animacion se vera de otra manera, pero de todos modos quedara muy bien.)

ver codigo

<center><div id="socialob"><ul>
<li id="twitter"><div><a href="TU DIRECCION DE TWITTER" target="_blank"><span class="fontawesome-twitter"></span></a></div></li>
<li id="facebook"><div><a href="TU DIRECCION DE FACEBOOK" target="_blank"><span class="fontawesome-facebook"></span></a></div></li>
<li id="google-plus"><div><a href="TU DIRECCION DE GOOGLE+" target="_blank"><span class="fontawesome-google-plus"></span></a></div></li>
<li id="rss"><div><a href="TU DIRECCION DEL FEED" target="_blank"><span class="fontawesome-rss"></span></a></div></li>
</ul></div></center>

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
#socialob {
  margin: 0px;font-size: 82.5%;
  padding: 0 0px;width:260px;
}
#socialob ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding: 5px 5px;
  text-align: center;
  border-radius: 10px;
}
#socialob ul li {
  display: inline-block;
  padding: 0px;line-height:1.0;
  margin: 0px 2px;
  border: 0px solid white;
  border-radius: 30px;
  background-color: white;
  box-shadow: inset 0px 0px 10px #128cc9;
  -webkit-box-shadow: inset 0px 0px 10px #128cc9;
  min-width: 20px;
  text-align: center;
  width: 50px;
  height: 50px;
  position: relative;
}
#socialob ul li div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0px solid white;
  border-radius: 30px;
  background: #99ddfc;
background: -moz-linear-gradient(top,  #99ddfc 0%, #128cc9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#99ddfc), color-stop(100%,#128cc9));
background: -webkit-linear-gradient(top,  #99ddfc 0%,#128cc9 100%);
background: -o-linear-gradient(top,  #99ddfc 0%,#128cc9 100%);
background: -ms-linear-gradient(top,  #99ddfc 0%,#128cc9 100%);
background: linear-gradient(to bottom,  #99ddfc 0%,#128cc9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ddfc', endColorstr='#128cc9',GradientType=0 );
-webkit-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width: 1s, height 1s, top 1s, left 1s;
}
#socialob ul li a {
  width: 20px;
  height: 20px;
  text-decoration: none;
  position: absolute;
  top: 15px;
  left: 15px;
  -webkit-transition: top 1s, left 1s;
  transition: top 1s, left 1s;
}
#socialob ul li a span {
  font-size: 1.9em;
  color: white;
  -webkit-transition: color 1s;
  transition: color 1s;
}
#socialob ul li:hover div {
  width: 0px;
  height: 0px;
  top: 25px;
  left: 25px;
}
#socialob ul li:hover a {
  color: white;
  top: -10px;
  left: -10px;
}
#socialob ul li:hover a span {
  color: #128cc9;
}
</style>

ver codigo

<center><div id="socialob"><ul>
<li id="twitter"><div><a href="TU DIRECCION DE TWITTER" target="_blank"><span class="fontawesome-twitter"></span></a></div></li>
<li id="facebook"><div><a href="TU DIRECCION DE FACEBOOK" target="_blank"><span class="fontawesome-facebook"></span></a></div></li>
<li id="google-plus"><div><a href="TU DIRECCION DE GOOGLE+" target="_blank"><span class="fontawesome-google-plus"></span></a></div></li>
<li id="rss"><div><a href="TU DIRECCION DEL FEED" target="_blank"><span class="fontawesome-rss"></span></a></div></li>
</ul></div></center>

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
#socialobb {
  margin: 0px;font-size: 82.5%;
  padding: 0 0px;width:260px;
}
#socialobb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding: 5px 5px;
  text-align: center;
  border-radius: 10px;
}
#socialobb ul li {
  display: inline-block;
  padding: 0px;line-height:1.0;
  margin: 0px 2px;
  border: 0px solid white;
  border-radius: 30px;
  background-color: white;
  box-shadow: inset 0px 0px 10px #ed9017;
  -webkit-box-shadow: inset 0px 0px 10px #ed9017;
  min-width: 20px;
  text-align: center;
  width: 50px;
  height: 50px;
  position: relative;
}
#socialobb ul li div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0px solid white;
  border-radius: 30px;
background: #f6e6b4;
background: -moz-linear-gradient(top,  #f6e6b4 0%, #ed9017 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6e6b4), color-stop(100%,#ed9017));
background: -webkit-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%);
background: -o-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%);
background: -ms-linear-gradient(top,  #f6e6b4 0%,#ed9017 100%);
background: linear-gradient(to bottom,  #f6e6b4 0%,#ed9017 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 );
-webkit-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width: 1s, height 1s, top 1s, left 1s;
}
#socialobb ul li a {
  width: 20px;
  height: 20px;
  text-decoration: none;
  position: absolute;
  top: 15px;
  left: 15px;
  -webkit-transition: top 1s, left 1s;
  transition: top 1s, left 1s;
}
#socialobb ul li a span {
  font-size: 1.9em;
  color: white;
  -webkit-transition: color 1s;
  transition: color 1s;
}
#socialobb ul li:hover div {
  width: 0px;
  height: 0px;
  top: 25px;
  left: 25px;
}
#socialobb ul li:hover a {
  color: white;
  top: -10px;
  left: -10px;
}
#socialobb ul li:hover a span {
  color: #ed9017;
}
</style>

ver codigo

<center><div id="socialob"><ul>
<li id="twitter"><div><a href="TU DIRECCION DE TWITTER" target="_blank"><span class="fontawesome-twitter"></span></a></div></li>
<li id="facebook"><div><a href="TU DIRECCION DE FACEBOOK" target="_blank"><span class="fontawesome-facebook"></span></a></div></li>
<li id="google-plus"><div><a href="TU DIRECCION DE GOOGLE+" target="_blank"><span class="fontawesome-google-plus"></span></a></div></li>
<li id="rss"><div><a href="TU DIRECCION DEL FEED" target="_blank"><span class="fontawesome-rss"></span></a></div></li>
</ul></div></center>

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
#socialobbb {
  margin: 0px;font-size: 82.5%;
  padding: 0 0px;width:260px;
}
#socialobbb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding: 5px 5px;
  text-align: center;
  border-radius: 10px;
}
#socialobbb ul li {
  display: inline-block;
  padding: 0px;line-height:1.0;
  margin: 0px 2px;
  border: 0px solid white;
  border-radius: 30px;
  background-color: white;
  box-shadow: inset 0px 0px 10px #000000;
  -webkit-box-shadow: inset 0px 0px 10px #000000;
  min-width: 20px;
  text-align: center;
  width: 50px;
  height: 50px;
  position: relative;
}
#socialobbb ul li div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0px solid white;
  border-radius: 30px;
background: #cdcdcd;
background: -moz-linear-gradient(top,  #cdcdcd 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdcdcd), color-stop(100%,#000000));
background: -webkit-linear-gradient(top,  #cdcdcd 0%,#000000 100%);
background: -o-linear-gradient(top,  #cdcdcd 0%,#000000 100%);
background: -ms-linear-gradient(top,  #cdcdcd 0%,#000000 100%);
background: linear-gradient(to bottom,  #cdcdcd 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdcdcd', endColorstr='#000000',GradientType=0 );
-webkit-transition: width 1s, height 1s, top 1s, left 1s;
  transition: width: 1s, height 1s, top 1s, left 1s;
}
#socialobbb ul li a {
  width: 20px;
  height: 20px;
  text-decoration: none;
  position: absolute;
  top: 15px;
  left: 15px;
  -webkit-transition: top 1s, left 1s;
  transition: top 1s, left 1s;
}
#socialobbb ul li a span {
  font-size: 1.9em;
  color: white;
  -webkit-transition: color 1s;
  transition: color 1s;
}
#socialobbb ul li:hover div {
  width: 0px;
  height: 0px;
  top: 25px;
  left: 25px;
}
#socialobbb ul li:hover a {
  color: white;
  top: -10px;
  left: -10px;
}
#socialobbb ul li:hover a span {
  color: #000000;
}
</style>