Dynamic Drive CSS Library- Flipboard CSS buttons

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Links & Buttons: CSS3 demos: Here

Flipboard CSS buttons

Author: Dynamic Drive

Flipboard creates a series of CSS buttons that flip horizontally on themselves when the mouse rolls over them, creating an elegant, eye catching effect. It employs CSS3 transform and transitions to do the heavy work. The menu works in IE10+, and all modern versions of FF, Chrome, Safari, and Opera. It degrades perfectly with older browsers, down to IE7.

On a technical note, each button consists of 3 levels deep of markup, specifically: LI -> A -> SPAN. This is necessary to create the desired effect. When the mouse rolls over the outer LI parent, we rotate both the inner A and SPAN elements 180 degrees using CSS3 transform's rotateY(180deg) value. The key here is to declare this value on both of the inner elements, so while the child A element causes any content inside to appear as a mirror of itself when rotated, the grand child SPAN element restores the content back to its proper orientation.

Demo:

The CSS:

<style>

ul.flipboard{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}

ul.flipboard li{
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;
}

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; /* 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;
}

ul.flipboard li 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;
}

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

ul.flipboard li:hover a{
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff; /* background color of button onmouseover */
-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); /* flip horizontally 180deg*/
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

</style>

The HTML:

<ul class="flipboard">
<li><a href="http://www.dynamicdrive.com"><span>d</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>r</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>i</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>v</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>e</span></a></li>
<li><a href="http://www.dynamicdrive.com"><span>n</span></a></li>
</ul>

<br /><br /><br />

<ul class="flipboard">
<li><a href="http://www.dynamicdrive.com"><span><img src="media/rss-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/twitter-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/facebook-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/google-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/stumble-heart.png" /></span></a></li>
<li><a href="http://www.dynamicdrive.com"><span><img src="media/yahoo-heart.png" /></span></a></li>
</ul>

Note: Social icons used can be downloaded here.

Code Info

Rate this code:

Date Posted: 04/15/2013

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Commenting is not available in this weblog entry.