Window 8 Style Menu In CSS

Make Window 8 style Menu in css3.Just copy and paste this code and use it into your website

CSS CODE

#menu-wrapper
{
 background:#fff;
 width:500px;
}
#menu
{
 margin:0px;
 padding:0px;
 list-style:none;
}
#menu li
{
 display:table;
 width:150px;
 height:150px;
 background:#000;
 float:left;
 margin:5px;
}
#menu li a
{
 display:table-cell;
 text-align:center;
 vertical-align:middle;
 color:#fff;
 text-decoration:none;
 font-family:Arial, Helvetica, sans-serif;
 opacity:.5;
 transition:all .3s linear;
 -webkit-transition:all .3s linear;
 -moz-transition:all .3s linear;
 -o-transition:all .3s linear;
 -ms-transition:all .3s linear;
}
#menu li a:hover
{
 opacity:1;
}
.yellow
{
 background:#f2c828;
}
.green
{
 background:#96c11f;
}
.pink
{
 background:#e61c67;
}
.blue
{
 background:#009fe3;
}
.purple
{
 background:#544391;
}
.orange
{
 background:#d96802;
}

HTML CODE

Home
About
Blog
Services
Products
Contact

Download File Used in this example View Live Demo

Total Downloads: