How to change w3.css button's own color?

Question

 <link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
 <div class="w3-bar w3-red">
        <a class="w3-bar-item w3-button w3-hover-blue">Button</a>
 </div>

I want to make that if you click on it, it changes its own color. And if you click it again, it changes to the original color. (see the hover) I don't know how to do, because it's a class, and the color is in the bar.

Answer 1

You can try this:

var IsCustomBG=false;
$(".w3-button").click(function(){
   if(IsCustomBG==false){
      $(this).css("background-color","red");
      IsCustomBG=true;
   }
   else{
      $(this).css("background-color","");
      IsCustomBG=false;
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
 <div class="w3-bar w3-red">
        <a class="w3-bar-item w3-button w3-hover-blue">Button</a>
 </div>

Answer 2

You can add/remove class on click of button.

$(".w3-bar-item").on("click",function(){

  if($(this).hasClass('color')){
    $(this).removeClass('color');
  }
  else{
    $(this).addClass('color');
  }
});

.color{
color:green !important;
background-color:yellow !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link type="text/css" href=" https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet">
 <div class="w3-bar w3-red">
        <a class="w3-bar-item w3-button w3-hover-blue">Button</a>
 </div>