我使用的引导按钮类，具体如下：引导按钮激活颜色变化
<button type="button" class="btn btn-success navbar-btn">Login</button>
眼下，颜色呈现绿色这是罚款。每次点击按钮时，按钮都会变成深绿色的阴影。我想要的是让按钮不会改变颜色，但保持默认的引导程序颜色，并且除去它周围的蓝色轮廓。
对于蓝色轮廓，我尝试将轮廓设置为none，但由于某种原因它没有起作用。我知道我们必须使用
.btn : active:focus {
}
但我不知道，所以我有在想出来的难度引导成功按钮的默认颜色。
这是btn-success：
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-success:hover {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
.btn-success:active:hover {
color: #fff;
background-color: #398439;
border-color: #255625;
}
所以你只需要添加!important默认样式（第一CSS块） 您还可以添加outline: none !important;删除蓝框时，按钮被激活
btn-success的默认颜色是＃5cb85c。你所要做的就是用DevTools检查它，或者搜索你的引导样式表，找到与这个类相关的所有规则，并在你自己的样式表中改变你需要的任何规则来覆盖它们。完全不需要使用!important，特异性是你的朋友。见MDN Specificity。
见工作片段（这个例子改变了所有国家相同的基本颜色只是作为一个例子，还删除box-shadow属性为好。你应该能够改变任何你需要在这里。）
.btn.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
}
.btn.btn-success.focus,
.btn.btn-success:focus {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
box-shadow: none;
}
.btn.btn-success:hover {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
box-shadow: none;
}
.btn.btn-success.active,
.btn.btn-success:active {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
}
.btn.btn-success.active.focus,
.btn.btn-success.active:focus,
.btn.btn-success.active:hover,
.btn.btn-success:active.focus,
.btn.btn-success:active:focus,
.btn.btn-success:active:hover {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c;
outline: none;
box-shadow: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="btn btn-success navbar-btn">Changed BTN</button>
<button type="button" class="btn btn-info navbar-btn">Default BTN</button>
</div>
</div>
</nav>我把原来的样式设置为btn-success，发现有四种颜色。我提取它们并旋转色调。然后我替换了所有相应的颜色。
/**
Original colors
===============
#28a745
#218838 <-- rgba(40, 167, 69, 0.5)
#1e7e34
#1c7430
Updated colors
===============
#8a458f
#703975 <-- rgba(112, 57, 117, 0.5)
#69346c
#613064
*/.btn.btn-success {
color: #fff;
background-color: #8a458f;
border-color: #8a458f;
}
.btn.btn-success:hover {
color: #fff;
background-color: #703975;
border-color: #69346c;
}
.btn.btn-success:focus, .btn-success.focus {
box-shadow: 0 0 0 0.2rem rgba(112, 57, 117, 0.5);
}
.btn.btn-success.disabled, .btn-success:disabled {
color: #fff;
background-color: #8a458f;
border-color: #8a458f;
}
.btn.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
color: #fff;
background-color: #69346c;
border-color: #613064;
}
.btn.btn-success:not(:disabled):not(.disabled):active:focus,
.btn.btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn.btn-success.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(112, 57, 117, 0.5);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">NavBar</a>
<button type="button" class="btn btn-success navbar-btn">Modified Button</button>
<button type="button" class="btn btn-info navbar-btn">Regular Button</button>
</div>
</div>
</nav>这里是我反向工程的SASS。
/** SASS */
$color-text: #ffffff
$color-highlight: #8a458f
$color-light: #703975
$color-dark: #69346c
$color-shadow: #613064
$box-shadow: 0 0 0 0.2rem transparentize($color-light, 0.5)
.btn-success
color: $color-text
background-color: $color-highlight
border-color: $color-highlight
&:hover
color: $color-text
background-color: #703975
border-color: $color-dark
&:focus, &.focus
box-shadow: $box-shadow
&.disabled, &:disabled
color: $color-text
background-color: $color-highlight
border-color: $color-highlight
&:not(:disabled):not(.disabled)
&:active, &.active
color: $color-text
background-color: $color-dark
border-color: $color-shadow
.show
>.btn-success.dropdown-toggle
color: $color-text
background-color: $color-dark
border-color: $color-shadow
>.btn-success.dropdown-toggle:focus
box-shadow: $box-shadow
.btn-success:not(:disabled):not(.disabled)
&:active:focus, &.active:focus
box-shadow: $box-shadow
要覆盖引导的CSS，你必须调用'！important'。只要确保你在这样做之前不需要再次重写该类。 –
所以对于大纲我将不得不做大纲：无！重要 @DrewKennedy – halapgos1
试试看看会发生什么，然后告诉我们。 :) –