ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン：ズルいデザイン（4）（1/3 ページ）

今回のテーマは「ズルいボタン」。これまでの連載で出てきた数々のズルいデザインテクニックを駆使して作成しよう。

» 2013年09月12日 17時00分公開

[赤塚妙子，@ken_c_lo]

　さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。

　今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。

　改良のポイントは次の通りです。

文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています
iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています
フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取ったボタンスタイルを取り入れました
input type="submit"やbuttonタグにも対応しています
前に紹介したものと同様、色の変更にも対応していますが、さらに簡単になりました。また文字色の変更にも対応しています

まずはmixinから

　ボタンの描画を汎用的に利用するために、次のようなSassのmixinを用意します。

@mixin button($color: #48B1F2, $font-size: 16px, $text-color: white) {
  display: inline-block;
  background-origin: border-box;
  position: relative;
  font-weight: bold;
  @include ts-000(.1);
  @include gradient-top-lighten($color, 5%);
  @include border-radius(4px);
  @include emboss-box($border: .1, $shadow: .1, $highlight: .2);
  color: rgba($text-color, .9);
  text-align: center;
  font-size: $font-size;
  padding: 0 ($font-size * 2);
  height: $font-size * 3;
  line-height: $font-size * 3;
  i {
    font-size: 130%;
    margin-right: 5px; 
    color: rgba($text-color, .5);
  }
  &:hover {
    @include gradient-top-lighten(lighten($color, 5%), 5%);
    text-decoration: none;
    color: $text-color;
    i {
      color: $text-color;
    }
  }
  &:active {
    @include gradient-top-lighten($color, 5%);
    top: 1px;
  }
}

　ソースが少し長くなりましたが、上から順に解説します。

　まず、ボタンの色$color、フォントのサイズ$font-size、フォントの色$text-colorを変数にして、デフォルト値を設定しておきます。これで色やサイズがフレキシブルに変えられるようになります。

　display: inline-blockでは、ボタンのサイズを文字サイズと比例して変えられるようにしています。

　background-origin: border-boxは、背景色の塗り範囲をborderまで含めるためのものです。この指定により半透明のborderの囲みが背景色になじんだ色になります。

　文字色がデフォルト白なので、ts-000でズルいテキストシャドウの黒を活用して、ボタンに彫り込まれた文字を表現します。

　ズルいグラデーションのgradient-top-lightenで、上の方が5％明るい色のグラデーションでボタンを塗ります。mixinのデフォルトは10％になっているのですが、よりさりげないグラデーションの方が、自然な物質感を表現でき、かつ昨今のフラットなデザイン傾向にもマッチします。

　ズルい角丸を参考に、ボタンに適した控えめな4pxの角丸をcompassを使って@include border-radius(4px)と指定します。

　次は、前回取り上げたズルいボックスシャドウのパターン4で作ったemboss-box mixinを使い、ボタンの膨らみを表現します。線の透明度を0.1、影の透明度を0.1、ハイライトの透明度を0.2に変更しています。

　テキストの色は、変数で指定した$text-colorを透明度0.9で描画します。Sassのファンクションrgbaを使って、rgba($text-color, .9)と書いておきます。

　paddingの指定ですが、今回は上下の高さをheightで指定するため、上下のpaddingは0にしておきます。左右のpaddingは文字サイズの2倍にしておきます。このように左右のpaddingを大きめに取っておくとバランスの良い存在感のあるボタンになります。

　heightは、文字サイズの3倍に指定します。同様にline-heightも文字サイズの3倍に指定します。ボタンの上下のpaddingを文字サイズと同じくらいで大きめに取るのが最近のデザイン傾向として見られるため、それを加味した実装です。また今回、高さの調節にpaddingを利用しない理由は、後述するfont-awesomeの利用時でも同じ高さに統一するためです。

　iタグの指定ですが、こちらはfont-awesomeの箇所で後述します。

　hover時は、変数で指定した$colorを5％明るくしたズルいグラデーションを適用します。テキストの色は、$text-colorの透明度を1にして、マウスを乗せるとボタンが明るくなるようにします。

　active時には、ボタンの色をデフォルト時に戻し、位置を1px下げます。クリックした時に押したような手応えを演出できます。