Button Twitter引导突出显示悬停按钮

Button Twitter引导突出显示悬停按钮,button,twitter-bootstrap,less,styling,Button,Twitter Bootstrap,Less,Styling,默认的TwitterBootstrap 2按钮样式使悬停时的按钮更暗。就我所见,这是通过在按钮上有一个光线渐变叠加来完成的,并使这个叠加在悬停时移动到-15px,这使按钮更暗 我想知道,如果我能做一个一般性的改变,使按钮在悬停时更轻,比如说相反的经验作为默认值 注意:在变量中切换@btnBackgroundHighlight和@btnBackground。越少(我在引导时使用越少),按钮的下部越轻(不悬停时)。这给人一种按钮被按下/禁用的感觉。我希望按钮的上半部分始终亮起。默认按钮具有从@btn

默认的TwitterBootstrap 2按钮样式使悬停时的按钮更暗。就我所见,这是通过在按钮上有一个光线渐变叠加来完成的,并使这个叠加在悬停时移动到-15px,这使按钮更暗

我想知道,如果我能做一个一般性的改变,使按钮在悬停时更轻,比如说相反的经验作为默认值


注意:
变量中切换
@btnBackgroundHighlight
@btnBackground
越少(我在引导时使用越少),按钮的下部越轻(不悬停时)。这给人一种按钮被按下/禁用的感觉。我希望按钮的上半部分始终亮起。

默认按钮具有从@btnBackground(顶部)到(@btnBackgroundHighlight)的渐变,并将悬停颜色设置为@btnBackgroundHighlight。切换颜色不会有帮助,因为灯光悬停将始终具有从暗到亮的渐变,反之亦然

解决方案1

在上生成按钮:选择第一个灯光变体。手动切换代码的渐变颜色。不要忘记通过添加:
background位置:0 15px,将overlay悬停到css中

解决方案2

通过添加以下内容,以更少的成本生成代码:

.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);
}
.buttonBackgroundReverse(@startColor、@endColor、@textColor:#fff、@textShadow:0-1px0rgba(0,0,0,25)){
//gradientBar将背景设置为令人愉悦的混合背景,以支持IE