Edited at

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

More than 5 years have passed since last update.

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 を振ってやればオッケです!

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