Bootstrap Button active color change

Question

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

Login
         


        

Answer 1

I've been playing around with this and the other answers and in Bootstrap 4.3, this is all I had to do:

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

Answer 2

I took the original style settings for the btn-success and noticed there are four colors. I extracted them and rotated the hues. I then replaced all of the corresponding colors.

/**

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>

---

Here is the SASS that I reverse-engineered.

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

Answer 3

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>