How to change Button CSS Color on Click

Question

I have the following buttons that change when hovering over them.

How do I set a background color when selecting one of the buttons without losing selection when I click elsewhere on the screen?

In the current way, clicking the button makes it the color you choose, but clicking another field of the screen returns to the original color.

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
}

button:hover {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<button id="scale-0" class="btn-scale-0">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3">&nbsp;3&nbsp;</button>

you would need js to add an active class (as long as the page wasn't submitted, then you would need to do it with your server side language). What does clicking on the button do? — Pete
– Pete, Commented Nov 11, 2019 at 14:50

dmuensterer · Accepted Answer · 2019-11-11 15:01:21Z

There is no possibility of achieving this without the use of JavaScript without experiencing unexpected side-effects.

If the visited state doesn't matter or is even desired, please have a look at @Blazemonger's answer.

CSS pseudo-classes focus and active are defined by losing its state when clicking elsewhere on the page.

JavaScript(+JQuery) solution:

$("#scale-0").click(function() {
  $("#scale-0").addClass('button-clicked');
});
$("#scale-1").click(function() {
  $("#scale-1").addClass('button-clicked');
});
$("#scale-2").click(function() {
  $("#scale-2").addClass('button-clicked');
});
$("#scale-3").click(function() {
  $("#scale-3").addClass('button-clicked');
});

button {
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
}

button:hover{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

.button-clicked {
  background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="scale-0" class="btn-scale-0 btn">&nbsp;0&nbsp;</button>
<button id="scale-1" class="btn-scale-1 btn">&nbsp;1&nbsp;</button>
<button id="scale-2" class="btn-scale-2 btn">&nbsp;2&nbsp;</button>
<button id="scale-3" class="btn-scale-3 btn">&nbsp;3&nbsp;</button>

Pete · Accepted Answer · 2019-11-11 15:07:05Z

If you don't want to use javascript and your button click doesn't post back, then I would change this so that it used radio buttons and labels instead (assuming only one can be selected at a time - if multiple can, then change the radio for a checkbox):

.scale {
  /* hide radio button */
  position: fixed;
  left: 100%;
  top: 100%;
}

.button {
  display:inline-block;
  padding: 15px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  cursor: pointer;
}

.button:hover {
  background: black;
  color: white;
}

.scale:checked + label {  
  /* selected styled */
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<input id="scale0" class="scale" name="scale" type="radio" value="0" checked>
<label for="scale0" class="button">&nbsp;0&nbsp;</label>
<input id="scale1" class="scale" name="scale" type="radio" value="1">
<label for="scale1" class="button">&nbsp;1&nbsp;</label>
<input id="scale2" class="scale" name="scale" type="radio" value="2">
<label for="scale2" class="button">&nbsp;2&nbsp;</label>
<input id="scale3" class="scale" name="scale" type="radio" value="3">
<label for="scale3" class="button">&nbsp;3&nbsp;</label>

Blazemonger · Accepted Answer · 2019-11-11 15:01:50Z

I don't think you can do this with buttons without using JavaScript to add a class or change the style.

However, you can do this with <a href> by adding a :visited style:

.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family:Arial, Helvetica, sans-serif;
  border:none;
  text-decoration:none;

}

.button:hover,.button:active,.button:visited{
  cursor: pointer;
  background: black;
}

.btn-scale-0, .btn-scale-1, .btn-scale-2, .btn-scale-3{
    background-color: #FE0200;
    color: white;
    text-shadow: 1px 1px 3px #8e8e8e;
}

<a href="#scale-0" id="scale-0" class="button btn-scale-0">0</a>
<a href="#scale-1" id="scale-1" class="button btn-scale-1">1</a>
<a href="#scale-2" id="scale-2" class="button btn-scale-2">2</a>
<a href="#scale-3" id="scale-3" class="button btn-scale-3">3</a>

The downside is that they will remain black even if you leave the page and return (unless the user clears their browser history).

Here's a second approach that uses invisible checkboxes instead of buttons. However, this also has a downside where the user can click the button again to undo the color change:

input[type=checkbox][id^=scale-] {
  display: none;
}
.button {
  padding: 15px 30px;
  margin: 0px 3px 0px 0px;
  font-size: 20px;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  border: none;

}
input[type=checkbox][id^=scale-]:checked + .button,
.button:hover,
.button:active,
.button:visited {
  cursor: pointer;
  background: black;
}

.btn-scale-0,
.btn-scale-1,
.btn-scale-2,
.btn-scale-3 {
  background-color: #FE0200;
  color: white;
  text-shadow: 1px 1px 3px #8e8e8e;
}

<input type="checkbox" id="scale-0"><label for="scale-0" class="button btn-scale-0">0</label>
<input type="checkbox" id="scale-1"><label for="scale-1" class="button btn-scale-1">1</label>
<input type="checkbox" id="scale-2"><label for="scale-2" class="button btn-scale-2">2</label>
<input type="checkbox" id="scale-3"><label for="scale-3" class="button btn-scale-3">3</label>

Collectives™ on Stack Overflow

How to change Button CSS Color on Click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related