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

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

[赤塚 妙子，@ken_c_lo]

リンクのボタン、submitボタン、buttonタグのいずれでも使える

　リンクのボタンとして使用するときには、aタグの中にincludeします。

.button{
  a {
    @include button;
  }
}

　submitボタンや、buttonタグで利用する際は、タグ直下にincludeします。

input[type="submit"] {
  @include button;
}

button {
  @include button;
}

　このように、1つのmixinで各種ボタンに汎用的に使えます。

ボタンのサイズを変えてみよう

　mixinの$font-sizeの引数でフォントの大きさを変えることによって、ボタンの大きさを自在に変更できます。

大きいボタン

.button-large {
  a {
    @include button($font-size: 24px);
  }
}

小さいボタン

.button-small {
  a {
    @include button($font-size: 12px);
  }
}

ボタンの色を変えてみよう

　$colorで色を指定することで、ボタンの色も自由に変えられます。また$text-colorで文字の色も変えられます。

赤いボタン

.button-red {
  a {
    @include button($color: #ef662f);
  }
}

黒いボタン

.button-black {
  a {
    @include button($color: #444);
  }
}

白いボタン

.button-white {
  a {
    @include button($color: #f6f6f6, $text-color: #444)
    @include ts-fff(0)
    @include ts-000(.1)
    @inlude emboss-box(.05, .05, 1)
  }
}

　白いボタンでは、文字の色を濃いグレーに指定しているため、少し調整が必要です。まず、テキストシャドウの白いハイライトを0に指定してオフにし、黒いテキストシャドウをalpha 0.1で適用します。emboss-boxもそのまま使うと色が濃過ぎるため、各プロパティを調整しました。