ステップ1：シンプルな角丸ボタンをデザインする
まずはボタンらしく見せるために、border-radiusプロパティを使ってボタンの角を丸くしよう。あわせて、周囲を囲むborderも指定しておく。
まずはボタンの角を丸くする
■CSS[サンプル1]
ul li a {
display : block;
width : 300px;
padding : 8px;
border : 3px solid #fff;
color : #fff;
font-size : 24px;
text-align : center;
text-decoration : none;
background-color : orange;
-webkit-border-radius : .8em; /* Saf3-4 + */
-moz-border-radius : .8em; /* FF1+ */
border-radius : .8em; /* Opera 10.5, IE 9, Saf5, Chrome */}
ベンダープリフィックスとは？
サンプル1のborder-radiusプロパティに前のある「-moz-」は「ベンダープリフィックス」と呼ばれる接頭辞で、以下のようにブラウザー名を表している。ベンダープリフィックスは、正式勧告前のCSS2.1/CSS3プロパティをブラウザーが先行実装・独自実装する際に利用され、該当するブラウザーだけが対象になる。
| ベンダープリフィックス | ブラウザー |
|---|---|
| -moz- | Firefox |
| -webkit- | Safari, Chrome |
| -o- | Opera |
| -ms- | IE |
| -khtml- | Konqueror |
ステップ2：ボタンを立体的にする
次に、box-shadowを適用してボタンに立体感を付けよう。これでだいぶボタンらしい見た目になってきた。
ボタンの周りに影を付けることでボタンらしい見た目になった
■CSS[サンプル2]
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .5); /* FF3.5+ */
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5); /* Saf3.0+, Chrome */
box-shadow: 0 0 5px rgba(0, 0, 0, .5); /* Opera 10.5, IE 9.0 */
続いて、マウスオーバーを設定し、ボタンがクリックできることを分かりやすく伝えよう。マウスオーバー時にボタンの周りの影が濃くなるように、rgbaのa（アルファ）値を0.5から0.8に変更する。rgbaのa値は1へ近づくほど透明度が低くなり、ソリッドな色へ近づく。
これで、デフォルト時とマウスオーバー時で、ボタンの影の濃さが変わるようになった。
マウスカーソルをボタンに重ねていない状態（デフォルト時）
マウスカーソルをボタンに重ねた状態（マウスオーバー時）
■CSS[サンプル3]
ul li a:hover {
-webkit-box-shadow : 0 0 8px rgba(0, 0, 0, .8); /* Saf3.0+, Chrome */
-moz-box-shadow : 0 0 8px rgba(0, 0, 0, .8); /* FF3.5+ */
box-shadow : 0 0 8px rgba(0, 0, 0, .8); /* Opera 10.5, IE 9.0 */ }
ステップ3：スムーズなアニメーションを付けよう
サンプル3を発展させると、マウスオーバーしたときに影がゆっくりと濃くなるアニメーションも付けられる。こうしたアニメーション処理は従来、JavaScriptを使う必要があったが、CSS3のtransitionプロパティを使えば簡単だ。
■CSS[サンプル4]
ul li a {
-moz-transition: -moz-box-shadow .4s ease-out; /* FF3.7+ */
-o-transition: box-shadow .4s ease-out; /* Opera 10.5 */
-webkit-transition: box-shadow .4s ease-out; /* Saf3.2+, Chrome */ }
