Bootstrap Button活动颜色变化

Question

我使用了bootstrap按钮类，更具体地说是以下内容：

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

现在，颜色显示为绿色，很好。每次我点击按钮，按钮变成深绿色。我想要的是使按钮不会改变颜色，但只保留默认的自举颜色，并删除它周围的蓝色轮廓。

对于蓝色轮廓，我尝试将轮廓设置为无，但由于某种原因它没有工作。我知道我们必须使用

.btn : active:focus {

}

但我不知道引导成功按钮的默认颜色，所以我很难搞清楚。

Answer 1

btn-success的默认颜色为＃5cb85c 。您所要做的就是使用DevTools检查它或搜索引导样式表以查找与此类相关的所有规则，并在您自己的样式表中更改所需的任何内容以覆盖它们。根本不需要使用!important，特殊性是你的朋友。请参阅MDN Specificity。

请参阅工作片段（此示例将所有状态更改为相同的基色，就像示例一样，同时也删除了box-shadow属性。您应该可以从此处更改所需的任何内容。）

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

/**

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

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

*/

＆＃13;

.btn.btn-success {
  color: #fff;
  background-color: #8a458f;
  border-color: #8a458f;
}
.btn.btn-success:hover {
  color: #fff;
  background-color: #703975;
  border-color: #69346c;
}
.btn.btn-success:focus, .btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 57, 117, 0.5);
}
.btn.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #8a458f;
  border-color: #8a458f;
}
.btn.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #69346c;
  border-color: #613064;
}
.btn.btn-success:not(:disabled):not(.disabled):active:focus,
.btn.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn.btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(112, 57, 117, 0.5);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我反向设计的SASS。

/** SASS */
$color-text: #ffffff
$color-highlight: #8a458f
$color-light: #703975
$color-dark: #69346c
$color-shadow: #613064
$box-shadow: 0 0 0 0.2rem transparentize($color-light, 0.5)

.btn-success
  color: $color-text
  background-color: $color-highlight
  border-color: $color-highlight
  &:hover
    color: $color-text
    background-color: #703975
    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-success.dropdown-toggle
    color: $color-text
    background-color: $color-dark
    border-color: $color-shadow
  >.btn-success.dropdown-toggle:focus
    box-shadow: $box-shadow
.btn-success:not(:disabled):not(.disabled)
  &:active:focus, &.active:focus
    box-shadow: $box-shadow

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