使用引导程序激活时如何更改按钮颜色？

Question

我正在使用引导程序 3。我想在单击按钮时更改按钮颜色。我的意思是当按钮被选中时应该是不同的颜色。我怎样才能使用css做到这一点？

我的代码是：

 <div class="col-sm-12" id="">
    <button type="submit" class="btn btn-warning" id="1">Button1</button>
    <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>

原文由 Priyank Dey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

CSS 有不同的伪选择器，你可以通过它来实现这样的效果。在您的情况下，您可以使用

:active ：如果您只在单击按钮时才需要背景颜色并且不想保留。

:focus ：如果您想要背景颜色，直到焦点位于按钮上。

 button:active{
    background:olive;
}

和

button:focus{
    background:olive;
}

JsFiddle 示例

PS：请不要在html元素的 Id 属性中给出数字。

原文由 Sachin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

CSS 有很多伪 selector like, :active, :hover, :focus 所以你可以使用。

 .btn{
    background: #ccc;
} .btn:focus{
    background: red;
}

 <div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
        </div>

JsFiddle

原文由 Ali Haider 发布，翻译遵循 CC BY-SA 4.0 许可协议