Как изменить цвет кнопки, когда она активна с помощью bootstrap?

Я использую 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>
13
css css3 twitter-bootstrap twitter-bootstrap-3

3 ответов

CSS имеет другой псевдо-селектор, с помощью которого вы можете достичь такого эффекта. В вашем случае вы можете использовать

:активный : если вы хотите цвет фона только при нажатии кнопки и не хотите сохраняться.

:фокус: если вы хотите, чтобы цвет фона, пока фокус находится на кнопке.

button:active{
    background:olive;
}

и

button:focus{
    background:olive;
}

Пример JsFiddle

П. С.: пожалуйста, не дайте номер в Id атрибут html элементов.

37

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

6

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

.active{
         background:red;
    }
 button.btn:active{
     background:red;
 }

jQuery--

jQuery("#my_styles .btn").click(function(){
    jQuery("#my_styles .btn").removeClass('active');
    jQuery(this).toggleClass('active');

});

посмотреть демо на jsfiddle

4