[CSS]非対応ブラウザにも配慮したCSS3で実装するボタンのチュートリアル

ビギナーにも分かりやすくステップごとに解説された、CSS3でスタイリングしたボタンを実装するチュートリアルを紹介します。

Create a CSS3 Call to Action Button

下記は、各ポイントを意訳したものです。

Basic HTML

まずはHTMLから始めましょう。
標準的なリンク要素に「.btn」というclass名をつけます。

HTML

note:

リンク要素の周りのdiv要素は実は必要ありません。
しかしながら、こういった容器となるものは何かの機会に役立つこともあるので良いアイデアです。

Basic CSS

CSSの最初の一歩として、通常時とホバー時の基本的なスタイルを与えます。

CSS

note:

背景のカラーは後で、CSS3グラデーションに代わります。背景にカラーを指定するのはCSS3非対応ブラウザへの対応を考慮したものです。

CSS2: text-shadow

ボタンのテキストに微妙なシャドウを加えます。
ホバー時にシャドウのカラーを変更していることに注目してください。

CSS

CSS2: border

ボタンの四辺に1pxのラインを加えます。

CSS

note:

ここまではCSS2を使用したものです。CSS3非対応ブラウザでどのように見えるかの最終確認はこの時点で行います。

CSS3: border-radius

ここからはCSS3を使用します。
まずはCSS3で角丸のエフェクトを加えます。記述はブラウザごとに異なるので、Mozillaブラウザには「-moz」、Webkitブラウザには「-webkit」を使用して指定します。

CSS

CSS3 Gradients

最後のステップです。
ボタンをモダンな見栄えにするため、背景にグラデーションのスタイルを与えます。

CSS

最終のCSS

「.btn」に適用したCSSの完全版は、下記のようになります。

CSS

パッと見では、Photoshopで作成したようなボタンに見えるかもしれませんが、画像を使用せずにスタイルシートで実装したものです。