bootstrap的button自定义颜色不生效，原因是什么？

Question

如图，修改了btn-success所对应的button的背景和边框颜色，还有:hove,:active伪类。

但有一个奇怪的现象是：
按钮点击后，鼠标离开按钮时，它的颜色还是原来的绿色。
为什么会这样？怎样怎样修改？

补充：
:active 后面的逗号截图的时候漏了，加上去后效果仍然一样。
但其实那个没有被我修改的样式不应该是:active，而更应该是：visited伪类，但是我加上去后效果也一样，而且我看bootstrap源码中也并没有给btn-success添加:visited的伪类。

Answer 1

你 .bgblue:active 没定义， 我看你这个 少了个 逗号

给这些类都加上你的样式 .bgBlue, .bgBlue:hover ,.bgBlue:active, .bgBlue:visited, .bgBlue:focus , .bgBlue:active.focus, .bgBlue:active:hover{

    background-color: blue
}

Answer 2

用.active不要用:active

Answer 3

添加如下css到自己的css并修改对应颜色

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle{
     background-color: #f64c16;
     border-color: #f64c16;
 }
.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
  .show > .btn-success.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem #f64c16;
  }