デフォルトのボタンには @btnBackground (上) から (@btnBackgroundHighlight) へのグラデーションがあり、ホバーの色を @btnBackgroundHighlight に設定します。色を切り替えても、明るいホバーには常に暗い色から明るい色へのグラデーションがあり、その逆も同様です。
解決策 1 :
ボタンを生成: http://twitterbootstrapbuttons.w3masters.nl/最初のライト バリアントを選択します。コードのグラデーションカラーを手動で切り替えます。以下を追加して、css にオーバーレイをホバーすることを忘れないでください。background-position: 0 15px;
解決策 2 :
以下を追加して、less でコードを生成します。
.buttonBackgroundReverse(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
.reset-filter();
// in these cases the gradient won't cover the background, so we override
&:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
color: @textColor;
background-color: @startColor;
*background-color: darken(@startColor, 5%);
}
&:hover, &:focus {background-position: 0 15px;}
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
&:active,
&.active {
background-color: darken(@startColor, 10%) e("\9");
}
}
@darkcolor: #46a546;
@lightcolor : lighten(#46a546, 30%);
.btn-light
{
.buttonBackgroundReverse(@lightcolor,@darkcolor);
}
@darkcolor を使用してボタンの色を設定し、必要に応じて @lightcolor のパーセンテージを変更します。例については、 http://bootply.com/65731を参照してください。