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

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

デモのキャプチャ

CSS3 Gradient Buttons

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

デモのキャプチャ

デモページ

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

サイトのキャプチャ

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

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

サイトのキャプチャ

ボタンのガイドライン

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

sponsors

top of page

©2018 coliss