Bootstrap Button active color change

Question

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

Login
         


        

Answer 1

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

  

    

      NavBar
      Modified Button
      Regular Button
    
  

---

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