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.

addClass and removeClass in jquery... Create your class with the color and just alter it onClick() — EugenSunic, Aug 11 '17 at 12:05
You add a class with !important on each property and you remove when needed. — user5014677, Aug 11 '17 at 12:06

score 4 · Accepted Answer · answered Aug 11 '17 at 12:06

4

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>

answered Aug 11 '17 at 12:06

Bharatsing Parmar

2,435
1
9
18

could have just use (!IsCustomBG), also, the bool variable is too complicated (naming) – EugenSunic Aug 11 '17 at 12:07
Yes we can use it, this is just for example. – Bharatsing Parmar Aug 11 '17 at 12:09

score 2 · Answer 2 · answered Aug 11 '17 at 12:07

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>

score 2 · Answer 3 · answered Aug 11 '17 at 12:11

You can simply create a class and toggle the class on click. This approach is useful when you want to add some other css properties in future for same operation.

$(".w3-button").click(function(){
  $(this).toggleClass('redCls');
});

.redCls{
   background-color:red !important;
}

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

ptts · Answer 4 · 2017-08-11T12:24:59.180

Do this, add an ID to the link, best would be to not use CSS frameworks like these at all.

var theLink = document.querySelector("#fkbtn");
theLink.addEventListener("click", function() {

this.className = ('clicked'); });

In the Css, you need this:

.clicked{ background:black; !important;}

With frameworks, things get messy, you need the !important to override stuff, just a huge mess, the above removes all other classes and thus, the dimensions, but your link color will change.

score 0 · Answer 5 · answered Aug 11 '17 at 12:09

#check{
  display: none;
}

label[for=check]{
  padding: 5px 10px;
  background-color: skyblue;
  cursor: pointer;
  color: white;
}

#check:checked + label{
  background-color: pink;
}

<input type="checkbox" id="check" />
<label for="check">button</label>

If you want to change button's color when you click, I think you should use checkbox trick. but it's not correct answer. It's just trick.

score 0 · Answer 6 · answered Aug 11 '17 at 12:09

Store the original value of the "button" and toggle between that and a custom color on click.

var button = document.getElementsByTagName('a')[0];
var color = button.style.backgroundColor;
button.addEventListener('click', function(){
  this.style.backgroundColor = this.style.backgroundColor === color ? '#BADA55' : color;
});

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

This is not as manageable as using a class. This is just illustrative of a simple non-jQuery example. — Namaskar, Aug 11 '17 at 12:12

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

6 Answers6