CSS3のtransition、box-shadow、text-shadow、border-radiusを使用してナビメニュー（ボタン）を作成してみました。
IE、Operaには対応していません。Firefox、Safari、Chromeでご覧ください
DEMO
HTML
<ul id="css3btn"> <li class="btn"><span class="yahoo"><a>Yahoo!</a></span></li> <li class="btn"><span class="google"><a>Google</a></span></li> <li class="btn"><span class="twitter"><a>Twitter</a></span></li> <li class="btn"><span class="facebook"><a>Facebook</a></span></li> </ul>
CSS
ul#css3btn {list-style:none;}
.btn a{
/* ボタンのレイアウト */
font: bold 1em "メイリオ", Meiryo, Verdana,Arial,"ＭＳ Ｐゴシック",sans-serif;
float: left;
margin-right:5px;
padding: 4px 16px;
color: #e7f3ef;
/* テキストシャドウ */
text-shadow: #000 1px 1px 1px;
/* ボックスシャドウ */
box-shadow: 0 3px 3px #b4d2d2, 0 3px 6px #ccc;
-webkit-box-shadow: 0 3px 3px #b4d2d2, 0 3px 6px #ccc;
-moz-box-shadow: 0 3px 3px #b4d2d2, 0 3px 6px #ccc;
/* 角丸 */
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
/* アニメーション */
transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
}
.btn a:hover {text-decoration: none;cursor: pointer}
.yahoo a{background-color: #ff0033;}
.google a{background-color: #007b3d;}
.twitter a{background-color: #1f70ff;}
.facebook a{background-color: #283d79;}
.yahoo a:hover{background-color: #c35a6a;}
.google a:hover{background-color: #3eb94c;}
.twitter a:hover{background-color: #45a6ff;}
.facebook a:hover{background-color: #6c90bc;}
IEにcss3を対応させるにはこちらが参考になります・・クロスブラウザな CSS box-shadow
Internet Explorer9とcss3について
css3を使用しての装飾ではInternet Explorerがサポートされていない事から敬遠してましたが、IE9ではCSSのサポートがさらに強化され、CSS3の多くのコンポーネントがサポートされるようになりました。