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 :

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

view this demo..... https://jsfiddle.net/sarowerj/cyu0u9rk/1/ — Sarower Jahan, Feb 25 '15 at 06:18
If this answer is helpful to you, please vote to me. Second answer is mine. — Sarower Jahan, Feb 25 '15 at 06:28

score 56 · Accepted Answer · edited Jun 20 '20 at 09:12

56

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 25 '15 at 06:11

Sachin

39,043
7
86
102

Thank for the reply. Actually i am calling javascript using the id. and it was working correctly. – Priyank Dey Feb 25 '15 at 06:20
Please provide the reason of downvote while doing it. It would help me to find out the issue as well as it will be good for the OP. – Sachin Feb 25 '15 at 06:20
I didn't do this. Your answer is absolutely correct. – Priyank Dey Feb 25 '15 at 06:21
Thanks for the answer. – Priyank Dey Feb 25 '15 at 06:28
Thanks for the `focus`, wasn't trivial to find out. – vakio Oct 23 '16 at 00:23
Just like to point out this won't work in Firefox. You'll have to play around with the -moz-focus-inner attribute but there isn't one-to-one correspondence. – Usman Mutawakil Nov 14 '17 at 00:11
Just for my curiousity, whats wrong with using numbers as id? I cant think of any downsides – Aditya Garg Feb 23 '22 at 02:06

score 7 · Answer 2 · answered Feb 25 '15 at 07:54

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

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

Sarower Jahan · Answer 3 · 2015-02-25T06:20:54.977

4

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

edited Feb 25 '15 at 06:20

answered Feb 25 '15 at 06:13

Sarower Jahan

1,384
1
12
19

A little late maybe, but I find your answer more appropriate than the rest. I viewed the jsfiddle. But I am having trouble as to how I should include it in my program. Is there anything I need to import? It worked fine on the fiddle, not in my program though. I placed the jquery in the ` – Harshith Rai Sep 17 '18 at 06:50
Check browser console message. make sure you have loaded jquery before above jquery – Sarower Jahan Sep 20 '18 at 21:42

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

3 Answers3

Linked