[CSS]CSS3を使用した素敵なボタンを実装するチュートリアルの決定版

Post on:2010年5月11日

sponsors

div, span, p, a, button, inputなどさまざまなHTML要素に適用が可能な、CSS3グラデーションを使用したボタンを実装するチュートリアルをWeb Designer Wallから紹介します。

ボタンは画像やJavaScriptを使用せず、CSSで実装されていて、フォントのサイズに基づいて拡大縮小が可能なものとなっています。ボタンのサイズはpaddinとfont-sizeで簡単に変更が可能です。
下記のデモページで、拡大縮小を試してみてください。

実装にはCSS3が使用されているため、CSS3対応ブラウザ、Internet Explorer、CSS3非対応ブラウザで見栄えが異なります。

ブラウザによる見栄えの違い

また、ボタンにはホバーとアクティブのエフェクトも実装されています。ボタン自体にはCSS3グラデーションをはじめ、角丸、ボックスシャドウ、テキストシャドウも適用されています。

ボタンのガイドライン

実装のコードは各エフェクト時のグラデーションのスタイルも含め、サイトで詳しく記載されています。
また、クロスブラウザ用のグラデーションは下記に詳しい説明があるので合わせて参考にしてください。
Cross-Browser CSS Gradient