CODEWITHSUNDEEP
javascriptjquerycssangularjstwitter-bootstrap
imadfooki fooki
imadfooki fooki

Reputation: 187

Changing the Color of button on Click in bootstrap

I am trying to change the color of the button on click . I am doing it on the Bootstrap button which is blue. But my code is not working.

With my JavaScript code following, it is not changing the color.

<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Units </button>
</button>

<button type="button" id="btnchiefdom" class="btn btn-primary" ng-click="levelCD()">Chiefdom</button>
</button>

<button type="button" id="btndistrict" class="btn btn-primary" ng-click="levelD()">District </button>
</button>

<button type="button" id="btnfaciltiy" class="btn btn-primary" ng-click="levelF()">Facility </button>
</button>

Here is the javascript code:

var b1 = document.getElementById("btnOUS");
var b2 = document.getElementById("btnchiefdom");
var b2 = document.getElementById("btndistrict");
var b2 = document.getElementById("btnfacility");

b1.onclick = function() {
     b1.style.background = "green";
     b2.style.background = "";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}
b2.onclick = function() {
     b1.style.background = "";
     b2.style.background = "green";   
}

Upvotes: 10

Views: 67821

Answers (9)

Abhi
Abhi

Reputation: 77

You can use bootstrap button class to change color of button.

$('.btn-success').on("click",function(){
    $(".btn-success").removeClass('btn-danger');
    $(this).addClass("btn-danger");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
  <button class="btn btn-success">Button 1</button>
  <button class="btn btn-success">Button 2</button>
  <button class="btn btn-success">Button 3</button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Upvotes: 0

Cameron
Cameron

Reputation: 2965

I didn't like the other answers because they either required jquery or !important

In bootstrap, the :active element state for bootstrap buttons is more specified than it is for other element states (to understand what this means, see here). This is why you may find yourself able to control the css of :hover but find that :active mysteriously doesn't work.

The way I got around this was by simply increasing the specificity of my css class. For example:

.my-button:active {
    background-color: green;
}

I changed it to

.my-button:not(:disabled):not(:disabled):active {
   background-color: green;
}

This gives it equal specificity to the bootstrap btn:active. Then I made sure my custom class appears first in the ordering.

<a href="foobar" class="my-button btn btn-primary btn-lg">Connect with Us</a>

Hope this helps! Just my personal solution.

Upvotes: 8

Riyas Ac
Riyas Ac

Reputation: 1613

$("#btnid").click(function (){ $(this).css("color","green"); } Please try this css() function use to style the object. I add on click event of button.

Upvotes: 0

Kumar Rahul
Kumar Rahul

Reputation: 79

You can also take two button instead one them should be green and another should be blue and apply show and hind function of jquery.

(#blue).click(function(){ (#blue).hide(); (#green).show(); })

initally #green button should be hide.

Upvotes: 0

Pedro Trujillo
Pedro Trujillo

Reputation: 1691

Use the following CSS pseudo selector:

active : if you want background color only when the button is clicked and don't want to persist.

btn.btn-primary:active
{
    background-color:grey !important; /* add here any color */
}


  
    
    .btn.btn-warning:hover{
        background: yellow;
    }
    
    /** on active **/
    
   .btn.btn-warning:active{
        background: red;
    }
<div class="col-sm-12" id="my_styles">
         <button type="submit" class="btn btn-warning" id="1">Click me please!!</button>

reference

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Replace "btnOUS" by "btnOUs" (small s) in :

var b1 = document.getElementById("btnOUS");
_______________________________________^

Hope this helps.

Basic example :

var b1 = document.getElementById("btnOUs");

b1.onclick = function() {
  b1.style.background = "green";  
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Units </button>

Upvotes: 2

user5541842
user5541842

Reputation:

try this. same for other buttons.just need to change the id name

 $("#btnfacility").click(function () {
            $(this).css({"background-color":"green !important"});
        });

Upvotes: 1

Gilberto S&#225;nchez
Gilberto S&#225;nchez

Reputation: 627

See this functional example:

$("button").click(function(){
  $("button").removeClass("active");
  $(this).addClass("active");
});
.active {
  background-color: green !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<button type="button" id="btnOUs" class="btn btn-primary" ng-click="levelOU()">Organization Unitss </button>
            <button type="button" id="btnchiefdom" class="btn btn-primary" ng-click="levelCD()">Chiefdom</button>
            <button type="button" id="btndistrict" class="btn btn-primary" ng-click="levelD()">District </button>
            <button type="button" id="btnfaciltiy" class="btn btn-primary" ng-click="levelF()">Facility </button>

Upvotes: 15

Brian
Brian

Reputation: 1025

Optionally you can create css classes and simply change the class on click.

Upvotes: 0

Related Questions