Bootstrap Button active color change

Question

I'm using the bootstrap button class, more specifically the following :

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

Right now, the color is showing green which is fine. Every time I click the button, the button changes into a darkish shade of green. What I want is to make it so that the button does not change color but just remain the default bootstrap color and also, remove the blue outline around it.

For the blue outline, I attempted setting the outline to none but it didn't work for some reason. I know we have to use

.btn : active:focus {

}

But I don't know the default color of the bootstrap success button so I'm having difficulty in figuring it out.

Answer 1

The default color for btn-success is #5cb85c. All you have to do is inspect it with DevTools or search your bootstrap stylesheet to find all the rules that pertain to this class and change whatever you need in your own stylesheet to override them. No need to use !important at all, specificity is your friend. See MDN Specificity.

See working Snippet (This example changed all states to the same base color just as an example and also removes the box-shadow property as well. You should be able to change whatever you need from here.)

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