0

默认的 Twitter Bootstrap 2 按钮样式使按钮在悬停时变暗。据我所知，这是通过在按钮上添加浅色渐变叠加层并在悬停时将此叠加层移动到 -15px 来完成的，这会使按钮变暗。

我想知道，如果我可以进行一般更改，使悬停时按钮变亮，将相反的体验作为默认设置？

注意：切换@btnBackgroundHighlight和@btnBackground输入variables.less（我使用较少的引导程序）最终使下部的按钮比上部的按钮更轻（当不悬停时）。这给人一种按钮被按下/禁用的感觉。我希望按钮的上部始终是最轻的。

4

1 回答 1

0

默认按钮具有从@btnBackground（顶部）到（@btnBackgroundHighlight）的渐变，并将悬停颜色设置为@btnBackgroundHighlight。切换颜色将无济于事，因为轻悬停将始终具有从暗到亮的渐变，反之亦然。

解决方案 1：

生成一个按钮： http: //twitterbootstrapbuttons.w3masters.nl/选择第一个灯光变体。手动切换代码的​​渐变色。不要忘记通过添加将覆盖悬停在您的CSS中：background-position: 0 15px;

解决方案 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);
}

使用@darkcolor 设置您的按钮颜色，也可以根据您的需要更改@lightcolor 的百分比。有关示例，请参见http://bootply.com/65731 。

于 2013-06-26T13:50:14.353 回答