CSS3 Social Buttons with Flip Effect

These CSS3 buttons flip horizontally on themselves when the mouse rolls over them, creating an elegant, eye catching effect. CSS3 transform and transitions are used to do the heavy work. It works in IE10+, and all modern versions of FF, Chrome, Safari, and Opera.

Mirror Effect – Rotate Buttons from Front to Back

Normal Effect – Restore Buttons Back to its Proper Orientation

div.flipboard{
margin:0;
padding:0;
}

div.flipboard span{
display: inline-block;
width: 80px; /* dimensions of buttons. Do not add padding/margins inside this rule */
height: 80px;
margin-right: 10px; /* spacing between buttons */
background: white;
font: bold 36px Arial; /* font size */
text-transform: uppercase;
text-align: center;
cursor: pointer;
}

div.flipboard span a{
display:block;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}

div.flipboard span a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 15px; /* Add top padding to "center" content */
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}

div.flipboard span a img{
border-width: 0;
}

div.flipboard span:hover a{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);

}

div.flipboard span:hover a span{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}