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,"MS Pゴシック",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の多くのコンポーネントがサポートされるようになりました。