3ステップですぐ出来る！ 簡単おしゃれなCSSボタンデザイン

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

STEP1.基本のボタンデザイン

まずは基本のボタンデザインです。まずは下記HTMLを用いて、それにCSSを適用してきます。

<a href="#" class="button">button</a>

基本のCSSは以下のようになります。

.button{
  display: block;
  width:180px;
  text-align: center;
  text-decoration: none;
  padding:0.6em 1em;
  color: #FFF;
  background: #23bd52;
  box-sizing:border-box;
  text-transform: uppercase;     
  font-weight: bold; 
  border-radius: 4px;
}

真ん中のグラデーションを適用させたボタンにはさらに以下のCSSを書き足します。(classを追加で付与するか、上記のbuttonクラスに追加してください)

.btn-style1{
    background-image: -moz-linear-gradient(top, #23bd52, #1ea347);
    background-image: -ms-linear-gradient(top, #23bd52, #1ea347);
    background-image: -webkit-linear-gradient(top, #23bd52, #1ea347);
    background-image: linear-gradient(top, #23bd52, #1ea347);
    background-clip: padding-box;
  }

一番右はさらにtext-shadowプロパティを用いて文字に陰影をつけています。

STEP2. Font Awesomeを使ってアイコンをつける

次はFont Awesomeを使ってボタンにアイコンを付けてみましょう。Font Awesomeをダウンロードしてきてfont-awesome.cssをHTMLに読み込ませます。

もしくはFont AwesomeのGet StartedにあるBootstrapのCDNを使うのでもOKです。

HTMLは以下のようにします。

<a href="#" class="button"><i class="fa fa-home fa-lg"></i>HOME</a>

CSSはi要素のスタイルを追加してください。

i{
  font-family:FontAwesome;
  font-style:normal;
  padding-right:0.5em;
  margin:0 0 0 -10px;
}

HTML側のclass名「fa-home」を変えれば様々なアイコンを表示することができます。[アイコン一覧はこちら]。

※BootstrapのCDNを使っている場合はFont Awesomeの最新バージョンが出てからCDNにホストされているCSSが更新されるまでに若干のタイムラグがあるようです。

STEP3. 透過PNGテクスチャーを適用する

STEP2まででもフラットデザインで使うのであれば十分だと思いますが、もう一工夫したいという場合には透過PNGテクスチャーを使ってみましょう。

Transparent Texturesというサイトには透過PNGの様々なテクスチャーがあります。繋ぎ目がわからないようにシームレスになっているのでボタンだけでなく、Facebookやtwitterの壁紙や普段のサイトデザイン作成の際にも使う事ができます。

使う場合は気に入ったテクスチャを探し、そのテクスチャの右下にあるDownloadボタンを押すだけ。

プロトタイプでちょっと試してみたいという場合には
サイトの左サイドバーにあるCSSをコピーしてきてそのまま貼付ける事でも適用できます。(これはあくまでプロトタイプ用なので、サイトで公開する場合はダウンロードしたものを使って下さいとのこと)

透過PNGなので背景色を変えるだけでいろいろなパターンを試す事が出来ます。またグラデーションなどと組み合わせても良いですね。

まとめ

いかがでしたでしょうか。今回はボタンデザインということでご紹介しましたが、もちろんボックス全てに適用することができます。CSSは複数背景画像も適用できますし、アニメーションできたりと昔より格段に出来る事が増えて楽しいですね(…腐った牛乳全盛期が懐かしいw)