CSS3
less
TwitterBootstrap

Twitter Bootstrap のボタン要素の色とかを変えた独自のボタンを作る

More than 3 years have passed since last update.

Twitter Bootstrap だとボタンに hover や active に勝手にスタイルをあててくれたりします。

これでカスタム色を作りたい場合 .btn .btn-xxxxxbackgroud とかで直接色つけたりなんだりしちゃうと、hover とか active 時のスタイルがよしなな感じになりません。

というわけで拡張してボタンを作りたい場合は、 .button-variant() という mixin が定義されているのでそれを使います

引数は、

.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);

つまり

.button-variant(文字色; 背景色; ボーダー色);

たとえば Facebook ならこう:

@btn-facebook-color: #4c66a4;

.btn-facebook {
.button-variant(lighten(@btn-facebook-color, 50%); @btn-facebook-color; darken(@btn-facebook-color, 20%));
}

そうすると

<a class="btn btn-facebook">Facebookでログイン</a>

とかで使えます。

(ちょっと文字とか違うけどスクリーンショットはこちら↓)

スクリーンショット 2014-05-14 11.54.24.png