Question

我试图按下按钮的样式，使悬停使按钮变浅，而不是更暗的阴影。我尝试了自举自定义页面（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-primary:not(:disabled):not(.disabled).active, 
    .btn-primary:not(:disabled):not(.disabled):active, 
    .show>.btn-primary.dropdown-toggle{
        color: #fff;
        background-color: #F7B432;
        border-color: #F7B432;
    }

Answer 3

或者可以这样做...
一次设置所有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文件中。

Answer 4

我必须添加!important才能使其正常工作。我也做了自己的课程button-primary-override。

.button-primary-override:hover, 
.button-primary-override:active,
.button-primary-override:focus,
.button-primary-override:visited{
    background-color: #42A5F5 !important;
    border-color: #42A5F5 !important;
    background-image: none !important;
    border: 0 !important;
}

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

4 个答案: