CSS3 グラデーションボタンを作る

css
HTML5

CSS3 グラデーションがあって、影がついているボタンを作る

CSS3では今まで画像でしか作れなかったようなボタンがCSSだけで実現できます。
グラデーションやテキストの発光ができるようになったのが大きいですね。
FirefoxとChromeなどで、若干記載方法が違いますが、次のようにすれば、リンクをそれなりのボタン風に見せることができます。

 <!--html-->
 <a href="hogehoge.html" class="orange_bt">オレンジボタン</a>

 /* CSS */
 .orange_bt {
        /* 背景のグラデーション*/
 	background: -moz-linear-gradient(top, #F9934F, #aa5221);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#F9934F), to(#aa5221));
 
 	padding: 5px 10px 5px;
 	color: #fff;
 	text-decoration: none;
        
        /* ボタンの角を丸くする*/
 	-moz-border-radius: 8px;
 	-webkit-border-radius: 8px;
 
        /* ボタンに影をつける */　
        /* 最初の3つのピクセルの指定は、初めが指定したピクセル分横にドロップシャドウ*/
        /* 次が下にドロップシャドウするピクセル　次がドロップシャドウの幅　*/　
        /* rgbaの値の最初の3文字はRGBの指定、最後はアルファ値　*/
 	-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.6);
 	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.6); 
 
        /* テキストへの影 */
 　 	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 　　　　　
 	border:solid 1px #aa5221;
 	cursor: pointer;
 	font-size:14px;
 }

残念ながら、IE9はCSS3対応ですが、このグラデーションには対応していません。
フィルタという機能を利用して、疑似的に作ることもできるようです。
参考：
http://kojika17.com/2011/02/css3-for-ie.php