CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Priyank Dey
Priyank Dey

Reputation: 1124

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

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>

Upvotes: 23

Views: 210040

Answers (3)

Ali Haider
Ali Haider

Reputation: 199

CSS has many pseudo selector like, :active, :hover, :focus so you can use. 

.btn{
    background: #ccc;
} .btn:focus{
    background: red;
}
<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>
JsFiddle

Upvotes: 8

Sarower Jahan
Sarower Jahan

Reputation: 1495

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

});

view the live demo on jsfiddle

Upvotes: 4

Sachin
Sachin

Reputation: 40970

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.

Upvotes: 58

Related Questions