Webデザインをやるときにボタンを作成する機会ってすごく沢山ありますよね？CSS3になってからは画像を使用しなくてもやれることがすごく増えたので、とても面白いです。

ただ、何回書いてもすぐに忘れてしまうものも沢山あります。今回は現場でよく使用するCSSの書き方をメモしておこうと思います。

CSSでボタンを作る

CSSでボタンを作るというのは日常茶飯事です。CSS3になってからは色々な事が出来るようになって面白いのですが、現場で使うのってそんなに多くないんです。複雑なものより、とにかくシンプルでユーザーが使いやすいボタンというと、そんなに多くないんですよね。

今回は、とにかく使用頻度の高い4つのボタンをまとめました。

1.アイコンを背景に使用したボタン

言うまでもなく使用頻度はとっても高いです。左にアイコンを設置したり、右下にアイコンを設置したり…。レスポンシブになってからは、アイコンの画像サイズにも気を遣わなければならなくなりました。

今回のものはレスポンシブデザインをする時にも使いやすい形にしました。

html

css

重要な部分にコメントを入れておきました。
背景にアイコン画像を指定して、右下に固定します。そしてアイコンの画像サイズを指定しています。

レスポンシブデザインにする時は、2倍くらいのサイズで画像を作成しておいて、その半分の数字でサイズ指定しましょう。

2.角丸にしたボタン

昔は角丸で作成した画像を背景に指定するのが一般的だったのですが、最近はCSSで指定する事が多いです。画像と同じように綺麗に表示されるので便利ですよね。

html

css

firefoxやIEなど、ブラウザによって若干依存性があるようです。一応様々なブラウザで対応できるように書いていますが、今後はborder-radius: 3px;だけで問題なく動くようになるんじゃないかと思っています。

3.上だけを角丸にしたタブっぽいボタン

上だけ角丸にしたボタンです。タブっぽいデザインをしたい時に使用します。2で作成した角丸の応用編って感じでしょうか。

html

css

細かい説明は省きますが、topの部分をbottomに変更すると下だけ角丸を作る事もできます。

4.マウスオーバーした時にふわっと変化するボタン

マウスオーバー（ロールオーバー）した時にふわっと変化させるテクニックです。こちらも人気がある書き方ですよね。

html

css

なんかゴチャゴチャしている感じがしますが、とりあえずこんな感じです。

CSSコピペ専用！現場ですぐに使えるボタンテクニック4つ　まとめ

いかがだったでしょうか？

「いやいやいや・・・俺はもっと違うものを作ってるよ！」

って思う方も沢山いるかもしれませんね…。でも、現場でよく使用するのはこんなものだと思います。他にも全然違うパターンで作る事もあるのですが、「頻繁に使用する」というボタンテクニックをまとめてみました。