0

デフォルトの Twitter Bootstrap 2 ボタン スタイルでは、ホバーするとボタンが暗くなります。私が見る限り、これはボタンに明るいグラデーション オーバーレイを配置し、ホバー時にこのオーバーレイを -15px に移動させてボタンを暗くすることで実現しています。

ホバー時にボタンを軽くする一般的な変更を加えることができる場合は、反対のエクスペリエンスをデフォルトとして教えてください。

注: Switch @btnBackgroundHighlightand @btnBackgroundin variables.less(ブートストラップには less を使用) を使用すると、(ホバリングしていない場合) 上部よりも下部のボタンが軽くなります。これにより、ボタンが何らかの形で押されている/無効になっているような感覚が得られます。ボタンの上部を常に一番軽くしたいです。

4

1 に答える 1

0

デフォルトのボタンには @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を参照してください。

于 2013-06-26T13:50:14.353 に答える