Bootstrap Button活动颜色变化

Question

我正在使用bootstrap按钮类,更具体地说是以下内容:

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

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

对于蓝色轮廓,我尝试将轮廓设置为无,但由于某种原因它不起作用.我知道我们必须使用

.btn : active:focus {

}

但是我不知道bootstrap成功按钮的默认颜色,所以我很难弄清楚它.

Answer 1

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

请参阅工作代码段(此示例将所有状态更改为相同的基本颜色,同样也删除了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>