3ステップですぐ出来る! 簡単おしゃれなCSSボタンデザイン
CSS3の活用の幅が広がり、ボタン一つとってもCSSだけで様々なスタイリングが出来るようになりました。今回はCSSとFont Awesomeを用いた簡単に出来るCSSデザイン手法をご紹介します。
STEP1.基本のボタンデザイン

まずは基本のボタンデザインです。まずは下記HTMLを用いて、それにCSSを適用してきます。
<a href="#" class="button">button</a>
基本のCSSは以下のようになります。
真ん中のグラデーションを適用させたボタンにはさらに以下のCSSを書き足します。(classを追加で付与するか、上記のbuttonクラスに追加してください)
一番右はさらにtext-shadowプロパティを用いて文字に陰影をつけています。
STEP2. Font Awesomeを使ってアイコンをつける
次はFont Awesomeを使ってボタンにアイコンを付けてみましょう。Font Awesomeをダウンロードしてきてfont-awesome.cssをHTMLに読み込ませます。
もしくはFont AwesomeのGet StartedにあるBootstrapのCDNを使うのでもOKです。

HTMLは以下のようにします。
CSSはi要素のスタイルを追加してください。
HTML側のclass名「fa-home」を変えれば様々なアイコンを表示することができます。[アイコン一覧はこちら]。
※BootstrapのCDNを使っている場合はFont Awesomeの最新バージョンが出てからCDNにホストされているCSSが更新されるまでに若干のタイムラグがあるようです。
STEP3. 透過PNGテクスチャーを適用する

STEP2まででもフラットデザインで使うのであれば十分だと思いますが、もう一工夫したいという場合には透過PNGテクスチャーを使ってみましょう。
Transparent Texturesというサイトには透過PNGの様々なテクスチャーがあります。繋ぎ目がわからないようにシームレスになっているのでボタンだけでなく、Facebookやtwitterの壁紙や普段のサイトデザイン作成の際にも使う事ができます。
使う場合は気に入ったテクスチャを探し、そのテクスチャの右下にあるDownloadボタンを押すだけ。
プロトタイプでちょっと試してみたいという場合には
サイトの左サイドバーにあるCSSをコピーしてきてそのまま貼付ける事でも適用できます。(これはあくまでプロトタイプ用なので、サイトで公開する場合はダウンロードしたものを使って下さいとのこと)
透過PNGなので背景色を変えるだけでいろいろなパターンを試す事が出来ます。またグラデーションなどと組み合わせても良いですね。
まとめ
いかがでしたでしょうか。今回はボタンデザインということでご紹介しましたが、もちろんボックス全てに適用することができます。CSSは複数背景画像も適用できますし、アニメーションできたりと昔より格段に出来る事が増えて楽しいですね(…腐った牛乳全盛期が懐かしいw)