Bootstrap用に適当な色のボタンを簡単につくれちゃうScssのMixin

Bootstrap に最初から入っている btn-primary や btn-success なんかには手を加えずに、新しい色のボタンをピャッとつくれちゃう Scss の Mixin のお話をします。

これは @asonas 先輩と一緒につくりました！

@mixin btn-colored-with($color) {
  $to: $color;
  $from: lighten($color, 15%);

  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

  background-color: $from;
  background-image: -o-linear-gradient(top, $from, $to);
  background-image: -ms-linear-gradient(top, $from, $to);
  background-image: -moz-linear-gradient(top, $from, $to);
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: linear-gradient(top, $from, $to);
  background-repeat: repeat-x;

  &:hover {
    color: #fff;
    background-color: $to;
  }
}

「あぁ、薔薇色の人生を歩みたい… そうだ、薔薇色のボタンをつくろう！」なんてときには、まずは適当に薔薇の画像を探し当てて、カラーピッカーでピッッと薔薇色の RGB 値を取得しましょう。

あとはこんな感じで、

.btn-rose {
  @include btn-colored-with(#bf0028);
}

薔薇色の class をひとつ定義してやって、お好きな HTML のタグにこの class を振ってやればオッケです！

以上、ボタンと薔薇でした！