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

Question

我正在尝试为我的按钮设置样式，使得鼠标悬停在按钮上时，它会变成较浅的颜色而不是较暗的颜色。我尝试了 Bootstrap 自定义页面 (http://getbootstrap.com/customize/)，但它没有提供更改按钮鼠标悬停颜色的选项。我尝试通过检查 CSS 手动更改，但是并不清楚按钮是如何获取鼠标悬停颜色的。我还尝试了另一个 Bootstrap 自定义网站 http://pikock.github.io/bootstrap-magic/app/#!/editor。

我想将主要颜色设为 #0495c9，将悬停颜色设为 #00b3db，但我只能指定按钮背景颜色，不能指定其悬停颜色。任何帮助都将不胜感激。

- streetsoldier

---

你能否发布你的代码或jsFiddle链接？难道你不能简单地使用 button { background-color: #0495c9 } 和 button:hover { background-color: #00b3db } 吗？ - Fahad Hasan

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*/
}

- jme11

---

此外，您可能还希望设置.btn-primary:active:focus以防止其闪烁。 - garryp

如果不起作用，请在每个颜色后面添加 !important。 - Pontios

Answer 2

或者可以这样做...
一次性设置所有按钮（类名为：.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文件中。

- Hel Lo

---

对于那些不太了解SASS的人，您应该添加更好的解释和适当的示例。 - Mecanik

Answer 3

我不得不添加!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;
}

- jbailey

Answer 4

这是更改按钮颜色的正确方法。

 .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;
    }

- kamlesh.halduniya

---

为什么你的例子中没有:hover？ - Yevgeniy Afanasyev

Answer 5

在Bootstrap 5中，你可以像这样在鼠标悬停时更改按钮的背景：

.status-btn:hover, .status-btn:focus, .status-btn:not(:disabled):not(.disabled):active, .status-btn:not(:disabled):not(.disabled).active, .show > .status-btn.dropdown-toggle {
    color: black;
    background-color: whitesmoke;
    border-color: blue;
}

- Niloy Quazi