How to change the button color when it is active using bootstrap

Question

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     lt div class  col-sm-12  id    gt       lt button type  submit  class  btn btn-warning  id  1  gt Button1 lt  button gt       lt button type  submit  class  btn btn-warning  id  2  gt Button2 lt  button gt   lt  div gt

User · Accepted Answer

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.

User · Answer

CSS has many pseudo selector like   active   hover   focus  so you can use   Html   lt div class  col-sm-12  id  my styles  gt        lt button type  submit  class  btn btn-warning  id  1  gt Button1 lt  button gt        lt button type  submit  class  btn btn-warning  id  2  gt Button2 lt  button gt   lt  div gt    css   btn      background   ccc     btn focus      background  red      JsFiddle

User · Answer

HTML--     lt div class  col-sm-12  id  my styles  gt      lt button type  submit  class  btn btn-warning  id  1  gt Button1 lt  button gt      lt button type  submit  class  btn btn-warning  id  2  gt Button2 lt  button gt   lt  div gt    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            view the live demo on jsfiddle

[css] How to change the button color when it is active using bootstrap?

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3