CSS3のみでかっこいいボタンを作ってみる（IE8も微対応)

HTML5がもてはやされてる。
時代の波に残されまいといまさらながらに勉強をはじめるわけですが、とりあえずかっこいいボタンを作ってみることにした。

こういうのを作ってみた。
さすがにIE8だと角丸が使えないし、影をつけれないし、グラデーションも大した機能もないのでこんな感じではあるがそこそこいいものが作れた。

ソースは以下

a.button{
 /* 角丸 /
 border-radius: 4px 4px 4px 4px;

 / グラデーション /
 background: -webkit-gradient(linear, center top, center bottom, from(#444444), color-stop(0.49, #444444),color-stop(0.5, #222222), to(#222222));
 background: -moz-linear-gradient(top, #444444, #444444 49%, #222222 50%, #222222);
 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#444444', endColorstr='#222222')";

 border: 1px solid #333333;
 / shadow /
 -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
 -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
 / 他 */
 padding: 3px;
 margin-top: 3px;
 margin-bottom: 3px;
 width: 240px;
 color: #ffffff;
 font-family:Verdana, arial, sans-serif;
 text-decoration:none;
 text-align: center;
 
 display: inline-block;
}

ボタンといいながらリンクになってますが、buttonに変えれば同じようになります。
webkit / moz はそれぞれFirefoxとChrome(webkit)になるわけですが、IE8でもグラデーションを行うには

-ms-filter

というものを使うことで近いことが出来ます。
ちなみにこれはIE8のみなのでIE6/7の場合はfilterとなるので注意が必要。
というかIE6/7は早く地球から滅んでほしい。
まぁ正規のWindowsXPなら自動更新でIE8になっているはずなので、もう気にしないことにしますけど。

それにしてもCSSだけでここまで出来るようになるのは本当にすごい。
いちいちデザインの人に修正してほしいとか言わなくても済むわけだし。
でもボタン１つでここまで大量のソースが必要になってもなんとも思わなくなったのはやっぱり回線の影響が大きいんでしょうね。

HTML 　