Active boot button and target style do not work

Question

I am trying to adjust the colors of the booster button, including the hang state, as well as when the user is busy pressing the button (down button) and after the user actually clicked the button. Sass, that looks like this:

// Button styling
button.btn {
  color: $white;
  background-color: $lightOrange;
  border-color: $darkOrange;
}
button.btn:hover {
  color: $white;
  background-color: $mediumOrange;
  border-color: $darkOrange;
}
button.btn:active, button.btn:target {
  color: $white;
  background-color: $darkOrange;
  border-color: $darkOrange;
}

Now the default and hover states work fine, but when the user clicks on the button on the button, by default it returns to this gray color, which is used by default when loading. Also, after the button has been pressed, only a gray color remains instead of mine $darkOrange, which I indicated. So, in short, why don't they work :activeand :target?

Answer 1

: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

, , Bootstrap, !important.

, , , .btn button.btn. button , , Bootstrap - . Bootstrap.

, :

.btn {
  color: $white;
  background-color: $lightOrange;
  border-color: $darkOrange;
}
.btn:hover {
  color: $white;
  background-color: $mediumOrange;
  border-color: $darkOrange;
}
.btn:active, 
.btn:target {
  color: $white;
  background-color: $darkOrange;
  border-color: $darkOrange;
}

Answer 2

, .

bootstrap button s, , , . , !important , selector.

.btn:active, button :active, :focus , .btn:active:focus. , :active, :

button.btn:active, 
button.btn:focus, 
button.btn:target, 
button.btn:active:focus { ... /*write your CSS here */ }

JSFiddle, , .

, , !important.