CSS3 меню

Аккуратненькое и стильное меню на css3. Впрочем его элементы можно использовать и как кнопки для сайта.

HTML

<nav>
    <ul>
        <li><a href="">Главная</a></li>
        <li><a href="">Форум</a></li>
        <li><a href="">Регистрация</a></li>
        <li><a href="">Справка</a></li>
        <li><a href="">Правила</a></li>
    </ul>
</nav>

Так как мы используем теги html5, то незабываем подключить в шапке и вот такой сниппет:

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS

nav{
    width: 960px;
    margin: 80px auto;
    text-align: center;
}

nav ul{
    margin: 0;
    padding: 0;
}

nav li{
    margin: 0 10px; /* Add some horizontal spacing */
    display: inline-block;
    *display: inline; /* IE7 и ниже */
    zoom: 1;
}

nav a{
    display: inline-block;
    position: relative;
    padding: 8px 15px;
    border: 2px solid #fff;
    text-decoration: none;
    color: #999;
    font: bold 14px 'Lucida sans', Arial, Helvetica;
    background-color: #eaeaea;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#fff));
    background-image: -webkit-linear-gradient(top, #eaeaea, #fff);
    background-image: -moz-linear-gradient(top, #eaeaea, #fff); 
    background-image: -ms-linear-gradient(top, #eaeaea, #fff); 
    background-image: -o-linear-gradient(top, #eaeaea, #fff);
    background-image: linear-gradient(top, #eaeaea, #fff);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset, 0 0 1px 0 rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset, 0 0 1px 0 rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset, 0 0 1px 0 rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .2);
}

nav a:hover{
    background-color: #eee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff));
    background-image: -webkit-linear-gradient(top, #eee, #fff);
    background-image: -moz-linear-gradient(top, #eee, #fff); 
    background-image: -ms-linear-gradient(top, #eee, #fff); 
    background-image: -o-linear-gradient(top, #eee, #fff);
    background-image: linear-gradient(top, #eee, #fff);        
}    

nav a:active{
    top: 1px;  /* эффект нажатия на кнопку */
    background: #f5f5f5;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset, 0 0 1px 0px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset, 0 0 1px 0px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05) inset, 0 0 1px 0px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .3);
}

nav a::before{
    content: '';
    position: absolute;
    z-index: -1;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    background-color: #e3e3e3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f7f7f7));
    background-image: -webkit-linear-gradient(top, #e3e3e3, #f7f7f7);
    background-image: -moz-linear-gradient(top, #e3e3e3, #f7f7f7); 
    background-image: -ms-linear-gradient(top, #e3e3e3, #f7f7f7); 
    background-image: -o-linear-gradient(top, #e3e3e3, #f7f7f7);
    background-image: linear-gradient(top, #e3e3e3, #f7f7f7);
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
    box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;        
}

nav a:active::before{
    top: -11px; /* Hey you, don't move! */
}