使用引导程序激活时如何更改按钮颜色? [英] How to change the button color when it is active using bootstrap?

问题描述

我正在使用引导程序 3.我想在单击按钮时更改按钮颜色.我的意思是按钮在被选中时应该是不同的颜色.如何使用 css 执行此操作?

我的代码是:

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

解决方案

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

<块引用>

:active :如果你只想要按钮被点击时的背景颜色并且不想持久化.

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

button:active{背景:橄榄色；}

和

button:focus{背景:橄榄色；}

JsFiddle 示例

P.S.:请不要在 html 元素的 Id 属性中给出数字.

I am using bootstrap 3. I want to change button color when I click on button.I mean button should be in different color when it is selected. How can I do this using css?

My codes are :

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

解决方案

CSS has different pseudo selector by which you can achieve such effect. In your case you can use

:active : if you want background color only when the button is clicked and don't want to persist.

:focus: if you want background color untill the focus is on the button.

button:active{
    background:olive;
}

and

button:focus{
    background:olive;
}

JsFiddle Example

P.S.: Please don't give the number in Id attribute of html elements.

这篇关于使用引导程序激活时如何更改按钮颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！