
(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.)
<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>
<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>
<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>
<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>
<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>
<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>