Creando botones css3 para redes sociales con Flipboard

Flipboard crea una serie de botones CSS con un efecto de rotación horizontalmente sobre sí mismos cuando pasamos el ratón sobre ellos, creando un efecto elegante y llamativo. Emplea CSS3 para transformar y crea transiciones para hacer el trabajo pesado. Los enlaces los podrás personalizar dependiendo la red social que desees utilizar

Utilizando una serie de imágenes a tu elección también podrás utilizar texto plano para el efecto.

En una nota técnica, cada botón se compone de 3 niveles de profundidad de marcado, específicamente: LI -> A -> SPAN . Esto es necesario para crear el efecto deseado. Cuando el ratón pasa sobre el exterior LI padre, hace que gire al interior A y SPAN los rota 180 grados usando CSS3 usando rotateY (180 grados) de valor.

Archivos a utilizar

index.html

style.css

index.html entre <body> colocar las clases correspondientes:

<ul class="flipboard">
<li><a href="#"><span>B</span></a></li>
<li><a href="#"><span>l</span></a></li>
<li><a href="#"><span>o</span></a></li>
<li><a href="#"><span>g</span></a></li>
<li><a href="#"><span>u</span></a></li>
<li><a href="#"><span>e</span></a></li>
<li><a href="#"><span>r</span></a></li>
<li><a href="#"><span>o</span></a></li>
<li><a href="#"><span>-</span></a></li>
<li><a href="#"><span>e</span></a></li>
<li><a href="#"><span>c</span></a></li>
</ul>

<ul class="flipboard">
<li><a href="#"><span><img src="rss-heart.png" /></span></a></li>
<li><a href="#"><span><img src="twitter-heart.png" /></span></a></li>
<li><a href="#"><span><img src="facebook-heart.png" /></span></a></li>
<li><a href="#"><span><img src="google-heart.png" /></span></a></li>
<li><a href="#"><span><img src="stumble-heart.png" /></span></a></li>
<li><a href="#"><span><img src="yahoo-heart.png" /></span></a></li>
</ul>

style.css el estilo es el que realiza el efecto css3

@charset "utf-8";
ul.flipboard{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; 
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}

ul.flipboard li{
display: inline-block;
width: 80px; 
height: 80px;
margin-right: 10px; 
background: white;
font: bold 36px Arial; 
text-transform: uppercase;
text-align: center;
cursor: pointer;
}

ul.flipboard li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; 
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}

ul.flipboard li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 15px; 
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s; 
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}

ul.flipboard li a img{
border-width: 0;
}

ul.flipboard li:hover a{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; 
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}

ul.flipboard li:hover a span{
-moz-transform: rotateY(180deg); 
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

Navegadores:

El menú funciona en IE10 +, y todas las versiones modernas de FF, Chrome, Safari y Opera. Degrada a la perfección con los navegadores más antiguos, hasta IE7.

Espero es sirva en algún proyecto…

Demostración

 

Relacionado