如何在使用bootstrap激活时更改按钮颜色？

Question

我正在使用bootstrap 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>

Answer 1

CSS有不同的伪选择器,您可以通过它实现这种效果.在你的情况下你可以使用

:active:如果只想在单击按钮时想要背景颜色并且不想保留.

:焦点:如果你想要背景颜色,直到焦点在按钮上.

button:active{
    background:olive;
}

和

button:focus{
    background:olive;
}

JsFiddle示例

PS:请不要给出Idhtml元素属性中的数字.

Answer 2

CSS有许多伪选择器,如:active,:hover,:focus,所以你可以使用.

HTML

<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>

CSS

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

的jsfiddle