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

1229 ワード
less CSS3 TwitterBootstrap CSS3 テキストリンク

Twitter Bootstrap だとボタンに hover や active に勝手にスタイルをあててくれたりします。
これでカスタム色を作りたい場合 .btn .btn-xxxxx に backgroud とかで直接色つけたりなんだりしちゃうと、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>

とかで使えます。

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