如何在Bootstrap 4中修改按钮激活状态颜色

嘿，看起来你已经把按钮的基础、悬停、焦点状态都配置得差不多了，就是激活（active）状态的样式还没完善或者想调整颜色对吧？这事儿很简单，直接修改.btn-primary:active选择器里的颜色值就搞定了！

问题分析 #

你的现有代码里，.btn-primary:active的background-color和border-color只写了一半（rgb(94, 79...），而且目前它和hover、focus状态的颜色完全一致。如果想让激活状态有不一样的视觉反馈，只需要替换这里的RGB值就行。

修改后的完整代码示例 #

/**BTN Primary**/
.btn{ 
  border-radius:1px; 
} 
.btn-primary{ 
  background-color: rgb(114, 96, 153); 
  border-color:rgb(114, 96, 153); 
} 
.btn-primary:hover{ 
  background-color: rgb(94, 79, 126); 
  border-color:rgb(94, 79, 126); 
} 
.btn-primary:focus{ 
  background-color: rgb(94, 79, 126); 
  border-color:rgb(94, 79, 126); 
} 
.btn-primary:active{ 
  /* 把这里的RGB值换成你想要的激活状态颜色即可 */
  background-color: rgb(74, 62, 101); 
  border-color:rgb(74, 62, 101); 
}

额外小提示 #

如果你的按钮在点击后还会保留焦点状态（比如用户用键盘操作按钮），可以额外添加组合选择器来处理这种场景，确保视觉效果一致：

.btn-primary:active:focus{
  background-color: rgb(74, 62, 101);
  border-color: rgb(74, 62, 101);
}

只需要把示例里的RGB值替换成你心仪的颜色代码，就能得到你想要的激活状态视觉效果啦！

内容的提问来源于stack exchange，提问作者user8718268