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

ズルいデザイン(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もそのまま使うと色が濃過ぎるため、各プロパティを調整しました。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。