Wie ändert man die Farbe der Schaltfläche, wenn sie mit Bootstrap aktiv ist?

Question

Ich benutze Bootstrap 3. Ich möchte die Schaltfläche Farbe ändern, wenn ich auf die Schaltfläche klicken. Ich meine Schaltfläche sollte in einer anderen Farbe sein, wenn es ausgewählt ist. Wie kann ich dies mit CSS tun?

Meine Codes sind:

<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 verschiedene Pseudo-Selektor hat, mit dem Sie eine solche Wirkung erzielen kann. aktiv: In Ihrem Fall können Sie

verwenden, wenn Sie Hintergrundfarbe möchten nur, wenn die Schaltfläche geklickt wird und wollen nicht bestehen bleiben.

: Fokus: Wenn Sie Hintergrundfarbe möchten, bis der Fokus auf der Schaltfläche ist.

button:active{ 
    background:olive; 
} 

und

button:focus{ 
    background:olive; 
} 

JsFiddle Example

P. S .: Bitte geben Sie die Nummer nicht in Id Attribut von HTML-Elementen.

Answer 2

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'); 

});

sehen die Live-Demo auf jsfiddle

Answer 3

CSS hat viele Pseudo-Selektor wie: aktiv,: schweben: Fokus, so können Sie verwenden.

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