如何修改按钮轮廓颜色？点击时将蓝色轮廓替换为#D5A021

嘿，针对你提出的两个关于按钮样式的问题，结合你给出的代码，我来一步步帮你搞定：

1. 如何修改按钮的轮廓颜色？ #

Bootstrap的按钮在获得焦点（比如点击、用Tab键选中）时的“轮廓”效果，默认是通过box-shadow属性实现的，而非原生CSS的outline。要修改这个颜色，你需要针对按钮的焦点状态（:focus）自定义box-shadow的值。

2. 点击按钮时将默认蓝色轮廓替换为#D5A021 #

你已经设置了.btn-primary的背景和边框为#D5A021，但默认的焦点/点击状态阴影还是Bootstrap自带的蓝色，所以我们需要覆盖这个默认样式。

这里是修改后的完整CSS代码，直接替换你现有的CSS即可：

.btn-xl { 
  padding: 1rem 2rem; 
} 

.btn-primary { 
  background-color: #D5A021; 
  border-color: #D5A021; 
} 

.btn-primary:active, 
.btn-primary:focus, 
.btn-primary:hover { 
  color: #fff; 
  background-color: #D5A021!important; 
  /* 自定义焦点阴影，用#D5A021的半透明版本更贴合Bootstrap风格 */
  box-shadow: 0 0 0 0.25rem rgba(213, 160, 33, 0.5)!important; 
}

额外说明： #

• 我用了rgba(213, 160, 33, 0.5)——这是#D5A021的半透明版本，比纯实色阴影更柔和，和Bootstrap的默认设计逻辑一致；如果你想要完全不透明的轮廓，直接改成box-shadow: 0 0 0 0.25rem #D5A021!important;就行。
• 加!important是为了确保你的样式能覆盖Bootstrap的默认样式（毕竟Bootstrap的内置选择器优先级可能更高）。如果你的自定义CSS文件是在Bootstrap之后引入的，也可以试着去掉!important看看效果，能不用就尽量不用，这样样式更易维护。

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