CSS3でボタンを作ろう

CSS3で、グラデーションや角丸、透明度、ドロップシャドウを施したボタンが簡単に表現できるようになりました。ちょっと前まではこのようなボタンが必要な場合はPhotoshopやFireworksで画像を作り、書き出す作業が必要だったので、嬉しい限りです。

ブラウザによって未対応のプロパティもあるので(特にIE8以前)導入が難しい場合もありますが、スマートフォンサイトにはほぼ対応しています。上手に使い分けることが出来れば時間の短縮化にも繋がるのではないでしょうか?見た目も画像と大差なく、データも軽量化できるので是非活用したいですね。今回はCSSボタンを作るのによく使われる「角丸」「グラデーション」「シャドウ」をご紹介したいと思います。

角丸

それぞれの角の数値を調節することで、正円やタブ形式のボタンも簡単に作れます。
正円はボタンとしてだけではなく、他の要素の上にシールみたいに重ねる表現にも使えますね。
(例)

border-radius: 10px;

14061101

グラデーション

色の設定がややこしくて敷居が高い気もするかもしれませんが、便利なジェネレータも沢山出ているので活用してみましょう。
(例)

background: -webkit-gradient(linear, center top, center bottom, from(#1F5CA0), to(#6FB0E4));
background: -moz-linear-gradient(top, #1F5CA0, #6FB0E4);

14061102

シャドウ

ボタンにも、テキストにも適用できます。アイコンテキストと組み合わせて、より画像で作ったようなボタンになりました。
(例)

box-shadow:5px 5px 0px -2px;
border:1px solid #666;
width:200px;
height:50px;

14061103

ジェネレータも沢山あります

CSS3 Generator – By Eric Hoffman & Peter Funk
http://www.css3.me/

CSS3 Generator   By Peter Funk   Eric Hoffman

Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/

14061104

CSS3 Button Generator
http://css3button.net/

14061105

一覧へ戻る