使用Bootstrap自定义更改按钮上的悬停颜色

Question

我试图设计按钮的样式,悬停使按钮变浅,而不是更暗的阴影.我试过bootstrap自定义页面(http://getbootstrap.com/customize/),它没有给我一个更改按钮悬停颜色的选项.我尝试通过检查CSS手动执行此操作但不清楚按钮如何获得悬停颜色.我尝试了另一个bootstrap定制网站

http://pikock.github.io/bootstrap-magic/app/#!/editor

我希望主色是#0495c9,悬停颜色是#00b3db但是我只能指定按钮bg颜色而不是它的悬停颜色.

任何帮助将不胜感激

Answer 1

按钮的颜色来自btn-x类(例如,btn-primary,btn-success),因此如果要通过编写自己的自定义css规则手动更改颜色,则需要更改:

/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary {
    color: #fff;
    background-color: #0495c9;
    border-color: #357ebd; /*set the color you want here*/
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #00b3db;
    border-color: #285e8e; /*set the color you want here*/
}

Answer 2

或者可以这样做...一次
设置所有 btn（类名如：.btn-+ $theme-colors: map-merge）样式：

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value,
    // modify
    $hover-background: lighten($value, 7.5%),
    $hover-border: lighten($value, 10%),
    $active-background: lighten($value, 10%),
    $active-border: lighten($value, 12.5%)
    // /modify
    );
  }
}

// code from "node_modules/bootstrap/scss/_buttons.scss"

应该添加到您的自定义 scss 文件中。