PDA

View Full Version : Flat flipping menu buttons vertical



ghaza
11-12-2013, 02:06 PM
This is the vertical vesion of the original Flat Flipping menu buttons. They combine the two hot trends that are flat design (absence of bevels, gradients and shadows etc) and CSS3 to create a bold and modern looking navigation system. Each icon inside the button can either be an image, or CSS icon font (as in first example below) for leaner and more rapid deployment. An optional text can be added beneath each button for additional cue.

The CSS:


<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<style>

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

ul.flatflipbuttons li{
margin:0;
display: block;
width: 100px; /* dimensions of buttons. */
height: 100px;
margin-bottom: 0; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}

ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}

ul.flatflipbuttons li:nth-of-type(1) a{
color: white;
background: #3B9DD5;
}

ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}

ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}

ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}

ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}

ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

ul.flatflipbuttons li b{ /* CSS for text alongside button */
display: block;
position: relative;
top: -100%; /* starting vertical position of text */
left: 100%; /* horizontal position of text */
text-align: left;
text-indent: 10px;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.5s;
}


ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}


ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}


ul.flatflipbuttons li:hover b{
opacity: 1;
top: -65%; /* vertical position of text onmouseover */
}

/* CSS for 2nd menu below specifically */

ul.second li a{
background: #eee !important;
}

ul.second li a:hover{
background: #ddd !important;
}

</style>


The HTML:


<ul class="flatflipbuttons">
<li><a href="http://www.adminspoint.com" title="Search"><span class="icon-search"></span></a> <b>Search</b></li>
<li><a href="http://www.adminspoint.com"><span class="icon-gears"></span></a> <b>Gears</b></li>
<li><a href="http://www.adminspoint.com"><span class="icon-rss"></span></a> <b>RSS</b></li>
<li><a href="http://www.adminspoint.com"><span class="icon-twitter"></span></a> <b>Twitter</b></li>
<li><a href="http://www.adminspoint.com"><span class="icon-rocket"></span></a> <b>Rocket</b></li>
</ul>

<br /><br />

<ul class="flatflipbuttons second">
<li><a href="http://www.adminspoint.com"><span><img src="https://lh3.googleusercontent.com/-BBCV_zDAtaM/UoI4jqke-dI/AAAAAAAAAnw/MhusF4LMgLM/s64-no/rss-heart.png" /></span></a></li>
<li><a href="http://www.adminspoint.com"><span><img src="https://lh5.googleusercontent.com/-9PB-toX4qdk/UoI4kZN1TZI/AAAAAAAAAn8/JGezqsGpzvU/s64-no/twitter-heart.png" /></span></a></li>
<li><a href="http://www.adminspoint.com"><span><img src="https://lh5.googleusercontent.com/-Uka8QRYVGwY/UoI4jWxVY_I/AAAAAAAAAno/0Rh0C-8-xMI/s64-no/facebook-heart.png" /></span></a></li>
<li><a href="http://www.adminspoint.com"><span><img src="https://lh6.googleusercontent.com/-U_bfDnbGQgU/UoI4jRdyGwI/AAAAAAAAAng/-oUsRWJDJwU/s64-no/google-heart.png" /></span></a></li>
<li><a href="http://www.adminspoint.com"><span><img src="https://lh3.googleusercontent.com/-q76AMFgPFDc/UoI4j5uxa7I/AAAAAAAAAn4/qPxCTAOl74E/s64-no/stumble-heart.png" /></span></a></li>
</ul>