以前做网页时候一般一些渐变的导航条和菜单效果都是用背景图片来实现想要的效果，今天用css3实现了一些灰色的漂亮的导航按钮效果，主要分为两种，

源代码下载地址：http://download.csdn.net/my

主要运用的css3中的渐变技术和border-radius,box-shadow技术；主要实现三种效果，当默认状态：hover及:active时效果。

html代码如下：

<div id="content">
  <h2>Dark Navigation Buttons</h2>
  <p>The following buttons are created using only CSS3 and make use of a variety of effects (gradients, shadows, borders).</p>
  <ul class="button-list">
    <li><a href='/' class='button' onClick="return false;">Home</a></li>
    <li><a href='/' class='button' onClick="return false;">About</a></li>
    <li><a href='/' class='button' onClick="return false;">Portfolio</a></li>
    <li><a href='/' class='button' onClick="return false;">Blog</a></li>
    <li class="search">
      <input type="text" class="search-input" name="search" />
      <input type="submit" class="search-submit"  />
    </li>
  </ul>
  <h3>Vertical Menu:</h3>
  <ul class="vertical-list">
    <li><a href='/' class='button' onClick="return false;">Home</a></li>
    <li><a href='/' class='button' onClick="return false;">Our Studio</a></li>
    <li><a href='/' class='button' onClick="return false;">Portfolio</a></li>
    <li><a href='/' class='button' onClick="return false;">Our Team</a></li>
    <li><a href='/' class='button' onClick="return false;">Get in Touch</a></li>
  </ul>
</div>

css代码如下：

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    background:url(images/bg.gif);
}
#content {
    padding: 40px 20px;
    font-family: "Helvetica Neue", Helvetica, Arial;
    font-size: 12px;
    line-height: 18px;
    color: #cfdae3;
}
a {
    text-decoration: none;
}
h2, h3 {
    margin: 0 0 20px;
    color: #fff;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}
pre {
    background: #fff;
    width: 460px;
    padding: 10px 20px;
    border-left: 5px solid #ccc;
    margin: 0 0 20px;
}
p {
    width: 500px;
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 30px;
}
input {
    margin: 0;
    padding: 0;
}
.button {
    outline:0;
    padding:5px 12px;
    display:block;
    color:#9fa8b0;
    font-weight:bold;
    text-shadow:1px 1px #1f2f2b;
    border:1px solid #1c252b;
    border-radius:3px;
    background:#232b30;
    background:-moz-linear-gradient(top, #3d4850 3%, #313d45 4%, #232b30 100%);
   &nbs