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

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

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

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

まずは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下げます。クリックした時に押したような手応えを演出できます。

paddingは大きめに取るのが今風できれいな印象のボタンを作るコツ：上下は文字の大きさの1倍／左右は文字の大きさの2倍