CSS Bootstrap 按钮活动颜色更改
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34536784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Button active color change
提问by halapgos1
I'm using the bootstrap button class, more specifically the following :
我正在使用引导按钮类，更具体地说是以下内容：
<button type="button" class="btn btn-success navbar-btn">Login</button>
Right now, the color is showing green which is fine. Every time I click the button, the button changes into a darkish shade of green. What I want is to make it so that the button does not change color but just remain the default bootstrap color and also, remove the blue outline around it.
现在，颜色显示绿色，这很好。每次单击该按钮时，该按钮都会变为深绿色。我想要的是让按钮不会改变颜色，而只是保持默认的引导程序颜色，并且删除它周围的蓝色轮廓。
For the blue outline, I attempted setting the outline to none but it didn't work for some reason. I know we have to use
对于蓝色轮廓，我尝试将轮廓设置为无，但由于某种原因它不起作用。我知道我们必须使用
.btn : active:focus {
}
But I don't know the default color of the bootstrap success button so I'm having difficulty in figuring it out.
但我不知道引导程序成功按钮的默认颜色，所以我很难弄清楚。
回答by vanburen
The default color for btn-successis #5cb85c. All you have to do is inspect it with DevTools or search your bootstrap stylesheet to find all the rules that pertain to this class and change whatever you need in your own stylesheet to override them. No need to use !importantat all, specificity is your friend. See MDN Specificity.
的默认颜色btn-success是#5cb85c。您所要做的就是使用 DevTools 检查它或搜索您的引导程序样式表以找到与此类相关的所有规则，并在您自己的样式表中更改您需要的任何内容以覆盖它们。!important根本不需要使用，特异性是你的朋友。请参阅MDN 特异性。
See working Snippet (This example changed all states to the same base color just as an example and also removes the box-shadow property as well. You should be able to change whatever you need from here.)
请参阅working Snippet（此示例将所有状态更改为相同的基色作为示例，并且还删除了 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>回答by Mr. Polywhirl
I took the original style settings for the btn-successand noticed there are four colors. I extracted them and rotated the hues. I then replaced all of the corresponding colors.
我采用了原始样式设置，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: #ffffff;
background-color: #8a458f;
border-color: #8a458f;
}
.btn.btn-success:hover {
color: #ffffff;
background-color: #703874;
border-color: #69346d;
}
.btn.btn-success:focus, .btn.btn-success.focus {
box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5);
}
.btn.btn-success.disabled, .btn.btn-success:disabled {
color: #ffffff;
background-color: #8a458f;
border-color: #8a458f;
}
.btn.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success:not(:disabled):not(.disabled).active {
color: #ffffff;
background-color: #69346d;
border-color: #613064;
}
.show > .btn.btn-success.dropdown-toggle {
color: #ffffff;
background-color: #69346d;
border-color: #613064;
}
.show > .btn.btn-success.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 0.5);
}
.btn.btn-success:not(:disabled):not(.disabled):active:focus,
.btn.btn-success:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(112, 56, 116, 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>Here is the SASS that I reverse-engineered.
这是我逆向工程的 SASS。
/** SASS */
$color-text: #ffffff
$color-highlight: #8a458f
$color-light: darken($color-highlight, 7.8%) // #703874
$color-dark: darken($color-highlight, 10.0%) // #69346d
$color-shadow: darken($color-highlight, 12.5%) // #613064
$box-shadow: 0 0 0 0.2rem transparentize($color-light, 0.5) // rgba(112, 56, 116, 0.5)
.btn.btn-success
color: $color-text
background-color: $color-highlight
border-color: $color-highlight
&:hover
color: $color-text
background-color: $color-light
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.btn-success.dropdown-toggle
color: $color-text
background-color: $color-dark
border-color: $color-shadow
>.btn.btn-success.dropdown-toggle:focus
box-shadow: $box-shadow
.btn.btn-success:not(:disabled):not(.disabled)
&:active:focus, &.active:focus
box-shadow: $box-shadow
回答by Hackeron
I've been playing around with this and the other answers and in Bootstrap 4.3, this is all I had to do:
我一直在玩这个和其他答案，在 Bootstrap 4.3 中，这就是我所要做的：
.btn.btn-primary:active:hover,
.btn.btn-primary:hover {
border-color: $color-primary;
background-color: $color-primary;
// color: $color-primary;
}
