Html 如何在bootstrap 4中更改按钮的活动颜色

我有这个输出

按钮不点击

按钮悬停

点击按钮（这是我的问题）

如何更改活动按钮的颜色

我有以下代码：

/**BTN主**/
.btn{
边界半径：1px；
}
.btn主要{
背景色：rgb（114、96、153）；
边框颜色：rgb（114、96、153）；
}
.btn主：悬停{
背景色：rgb（94,79,126）；
边框颜色：rgb（94,79,126）；
}
.btn主要：焦点{
背景色：rgb（94,79,126）；
边框颜色：rgb（94,79,126）；
}
.btn主：活动{
背景色：rgb（94,79,126）；
边框颜色：rgb（94,79,126）；
盒影：0 1px 1px rgba（255，255，255，0.075）插图，0 0 8px rgba（114，96，153，0.6）；
大纲：0无；
}
/**BTN Primary**/

您必须覆盖

。BTN Primary:not（：disabled）：not（.disabled）：active{

检查该元素，在开发工具中，单击

切换伪类

，然后选中

活动

，查看当按钮处于活动状态时应用了哪些规则，您将看到是否覆盖了规则或必须覆盖哪些规则

在代码段中无法使其工作，这里有一把小提琴：

编辑：（根据评论）

要更改蓝色阴影，它位于：

.btn primary:not（：disabled）：not（.disabled）：focus{

---

更新的fiddle:

如果您正在使用

webpack

或类似的编译器从引导源代码获取

css

您可以在

my.scss

文件中这样做

$blue:    rgb(114, 96, 153);
@import "~bootstrap/scss/_variables";
@import '~bootstrap/scss/bootstrap';

---

你明白了。谢谢你，先生！最后一个问题，先生。盒子阴影不会改变。如何改变它？.btn主：不（：禁用）：不（。禁用）：活动{背景颜色：rgb（94，79，126）；边框颜色：rgb（94，79，126）；盒子阴影：0 1px 1px rgba（255，255，255，0.075）插入，0 0 8px rgba（114，96，153，0.6）；轮廓：0无；}不客气，我更新了影子的答案：）