web-dev-qa-db-fra.com

Comment changer la couleur du bouton quand il est actif en utilisant bootstrap?

J'utilise bootstrap 3. Je veux changer la couleur du bouton quand je clique sur le bouton.Je veux dire que le bouton doit être de couleur différente quand il est sélectionné. Comment puis-je utiliser css?

Mes codes sont:

<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>
csscss3twitter-bootstraptwitter-bootstrap-3
20
Priyank Dey

CSS a différents pseudo sélecteurs grâce auxquels vous pouvez obtenir un tel effet. Dans votre cas, vous pouvez utiliser

: active : si vous voulez une couleur d'arrière-plan uniquement lorsque vous cliquez sur le bouton et que vous ne souhaitez pas persister.

: focus : si vous voulez une couleur d'arrière-plan jusqu'à ce que le focus soit sur le bouton.

button:active{
    background:olive;
}

et

button:focus{
    background:olive;
}

Exemple JsFiddle

P.S .: Merci de ne pas donner le numéro dans l'attribut Id des éléments HTML.

46
Sachin

CSS a beaucoup de pseudo sélecteurs comme:: actif,: survol,: focus, donc vous pouvez utiliser.

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

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

});

voir la démo en direct sur jsfiddle

4
Sarower Jahan