[CSS]画像にも負けないクオリティのボタンを実装するスタイルシート

CSS3を使用して、ディテールにこだわったボタンを実装するスタイルシートのチュートリアルをInferenceから紹介します。

Creating a Realistic Looking Button with CSS3

実装されたデモは、元記事の下「Show and Tell」で確認できます。
対応ブラウザはFx3.6, Safari4, Chromeで、IE8では角丸とアクティブ時のスタイルが欠けます。

実装：HTML

ディテールにこだわっているため、HTMLは煩雑なものになっています。これらはCSSの指定に意味をなします。

実装：CSS

スタイルシートの記述は元記事を参照ください。ここではそれぞれの役割について解説します。

ノーマル時のスタイル

1. 明るいグラデーション
   ライトが当たっていることを示しています。
2. 内側の明るいボーダー
   そのライトをよりリアルに見せるためエッジを反射させます。
3. トップの一番明るいボーダー
   四つのエッジの中でトップが一番明るくなります。
4. 最下部の明るいボーダー
   地になじむように明るいボーダーを使用します。
5. ボタンの周りのボーダー
   ボタンの形を示すボーダーです。
6. テキストのシャドウ
   ボタンにプレスされているようなエフェクトを適用します。

アクティブ時のスタイル

1. 暗いグラデーション
   凸に見せるため、明るいグラデーションと逆のものを使用します。
2. トップの明るいボーダー
   切り替わった際に、トップのエッジが動かないことを強調します。
3. 最下部のボーダー
   トップと同様に動かないことを強調するため、明るいラインを使用します。
4. サイドのボーダー
   動きをみせるため、少しだけ軽いものにします。