Bootstrap按钮激活颜色更改

Question

我正在使用 Bootstrap 的按钮类，更具体地说是以下内容：

<button type="button" class="btn btn-success navbar-btn">Login</button>

现在，按钮的颜色显示为绿色，这很好。每次我点击按钮，按钮就会变成较深的绿色。我想要的是让按钮保持默认的Bootstrap颜色而不改变颜色，同时删除它周围的蓝色轮廓。

对于蓝色轮廓，我尝试将轮廓设置为“none”，但出于某种原因它没有起作用。我知道我们必须使用

.btn : active:focus {

}

但是我不知道 Bootstrap 成功按钮的默认颜色，所以我很难弄清楚。

- halapgos1

---

要覆盖Bootstrap的CSS，您必须调用!important。在这样做之前，请确保您不需要再次覆盖该类。 - Drew Kennedy

所以对于大纲，我必须执行outline: none !important。 @DrewKennedy - halapgos1

试一下看看会发生什么，然后让我们知道。 :) - Drew Kennedy

@DrewKennedy 那不一定是对的。提高 CSS 规则的 优先级 可以覆盖默认的 Bootstrap 样式，而不需要使用 !important。 - matt.

Answer 1

btn-success 的默认颜色是 #5cb85c。您只需使用 DevTools 检查它或搜索您的 Bootstrap 样式表以查找与此类相关的所有规则，并更改您自己样式表中需要覆盖的内容即可。完全不需要使用 !important，选择器的优先级是您的朋友。请参见 MDN Selector 优先级。

查看工作示例（此示例将所有状态更改为相同的基本颜色，仅作为示例，并且还删除了 box-shadow 属性。您应该能够从这里更改您需要的任何内容。）

.btn.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.btn.btn-success.focus,
.btn.btn-success:focus {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
  box-shadow: none;
}
.btn.btn-success:hover {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
  box-shadow: none;
}
.btn.btn-success.active,
.btn.btn-success:active {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
}
.btn.btn-success.active.focus,
.btn.btn-success.active:focus,
.btn.btn-success.active:hover,
.btn.btn-success:active.focus,
.btn.btn-success:active:focus,
.btn.btn-success:active:hover {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
  outline: none;
  box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
      <button type="button" class="btn btn-success navbar-btn">Changed BTN</button>
      <button type="button" class="btn btn-info navbar-btn">Default BTN</button>
    </div>
  </div>
</nav>

- vanburen

Answer 2

我采用了 btn-success 的原始样式设置，并发现有四种颜色。我提取了它们并旋转了色调。然后，我替换了所有相应的颜色。

/**

Original colors
===============
#28a745
#218838 <-- rgba(40, 167, 69, 0.5)
#1e7e34
#1c7430

Updated colors
===============
#8a458f
#703975 <-- rgba(112, 57, 117, 0.5)
#69346c
#613064

*/

.btn.btn-success {
  color: #ffffff;
  background-color: #8a458f;
  border-color: #8a458f;
}
.btn.btn-success:hover {
  color: #ffffff;
  background-color: #703874;
  border-color: #69346d;
}
.btn.btn-success:focus, .btn.btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5);
}
.btn.btn-success.disabled, .btn.btn-success:disabled {
  color: #ffffff;
  background-color: #8a458f;
  border-color: #8a458f;
}
.btn.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success:not(:disabled):not(.disabled).active {
  color: #ffffff;
  background-color: #69346d;
  border-color: #613064;
}
.show > .btn.btn-success.dropdown-toggle {
  color: #ffffff;
  background-color: #69346d;
  border-color: #613064;
}
.show > .btn.btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5);
}
.btn.btn-success:not(:disabled):not(.disabled):active:focus,
.btn.btn-success:not(:disabled):not(.disabled).active:focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">NavBar</a>
      <button type="button" class="btn btn-success navbar-btn">Modified Button</button>
      <button type="button" class="btn btn-info navbar-btn">Regular Button</button>
    </div>
  </div>
</nav>

---

这里是我逆向工程出来的SASS代码。

/** SASS */
$color-text: #ffffff
$color-highlight: #8a458f
$color-light: darken($color-highlight, 7.8%)                // #703874
$color-dark: darken($color-highlight, 10.0%)                // #69346d
$color-shadow: darken($color-highlight, 12.5%)              // #613064
$box-shadow: 0 0 0 0.2rem transparentize($color-light, 0.5) // rgba(112, 56, 116, 0.5)

.btn.btn-success
  color: $color-text
  background-color: $color-highlight
  border-color: $color-highlight
  &:hover
    color: $color-text
    background-color: $color-light
    border-color: $color-dark
  &:focus, &.focus
    box-shadow: $box-shadow
  &.disabled, &:disabled
    color: $color-text
    background-color: $color-highlight
    border-color: $color-highlight
  &:not(:disabled):not(.disabled)
    &:active, &.active
      color: $color-text
      background-color: $color-dark
      border-color: $color-shadow
.show
  >.btn.btn-success.dropdown-toggle
    color: $color-text
    background-color: $color-dark
    border-color: $color-shadow
  >.btn.btn-success.dropdown-toggle:focus
    box-shadow: $box-shadow
.btn.btn-success:not(:disabled):not(.disabled)
  &:active:focus, &.active:focus
    box-shadow: $box-shadow

- Mr. Polywhirl

---

谢谢你！颜色调色板的例子真的帮助我整理了我的更改。 - justiceorjustus

@justiceorjustus 刚刚收到通知，我已经更新了这个程序，使用 darken 替代了“编造”颜色值。 - Mr. Polywhirl

你真是太棒了！我实际上有大约三种不同的“风格”需要完成，但还没有完成。这真的很有帮助。我希望每个人都像我一样滚动到这个答案。 - justiceorjustus

@Mr.Polywhirl，出于好奇，您是如何生成颜色偏移的？例如，您是每次将基础颜色阴影10％吗？您使用了类似这样的工具，还是自己计算颜色（如果是这样，那么您的计算方式是什么）？谢谢！ - Joel Balmer

@Mr.Polywhirl，好久不见了，抱歉 :) 我只是想知道你说的色调旋转具体是什么意思/你是如何实现的。 - Joel Balmer

Answer 3

我一直在尝试这个答案和其他答案，在Bootstrap 4.3中，我所需要做的就是：

.btn.btn-primary:active:hover,
.btn.btn-primary:hover {
    border-color: $color-primary;
    background-color: $color-primary;
    // color: $color-primary;
}

- Hackeron