How can I change color of the heart-button after click?

Question

You can see in my code below I used pseudo-elements and actually that's why I got confused. Any idea how can I change color after click on button?

.heart {
  background-color: red;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  position: absolute; 
  left: 45%; top: 45%;
  width: 50px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  width: 50px;
}

.heart:before {
  top: -25px;
  left: 0;
}

.heart:after {
  left: 25px;
  top: 0;
}

<div class="wrapper">
    <a class="heart" href="#"></a>
</div>

another idea to build a heart: https://stackoverflow.com/a/51216413/8620333 maybe easier to change color using CSS variable — Temani Afif, May 23 '20 at 21:31
Or just, you know, use a heart character: ❤ or emoji : ❤️ ... — Heretic Monkey, May 23 '20 at 21:37

score 3 · Answer 1 · answered May 23 '20 at 21:32

If it's only when you click on it, you can use the active state (see example code below):

    .heart:active, .heart:active:before, .heart:active:after {
        background-color: black;
    }

If you want to change color while the element is in focus, focus state:

    .heart:focus, .heart:focus:before, .heart:focus:after {
        background-color: black;
    }

If you want to change it "permenantly", you can use JavaScript to add a class to the element (with the desired colors declared in CSS).

.heart {
  background-color: red;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  position: absolute; 
  left: 45%; top: 45%;
  width: 50px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  width: 50px;
}

.heart:before {
  top: -25px;
  left: 0;
}

.heart:after {
  left: 25px;
  top: 0;
}

.heart:active, .heart:active:before, .heart:active:after {
    background-color: black;
}

<div class="wrapper">
    <a class="heart" href="#"></a>
</div>

score 3 · Accepted Answer · answered May 23 '20 at 21:36

Use currentColor as the background-color for all elements. Set the color of .heart to red, and set it to black when it's focused or active:

.heart {
  color: red;
  background-color: currentColor;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  position: absolute; 
  left: 45%; top: 45%;
  width: 50px;
}

.heart::before,
.heart::after {
  content: "";
  background-color: currentColor;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  width: 50px;
}

.heart:before {
  top: -25px;
  left: 0;
}

.heart:after {
  left: 25px;
  top: 0;
}

.heart:focus {
  color: black;
}

<div class="wrapper">
    <a class="heart" href="#"></a>
</div>

If you want the color change to remain even after you click somewhere else, and you would like to toggle the color on click, you might want to use a checkbox with label instead:

.heart {
  color: red;
  background-color: currentColor;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  position: absolute;
  left: 45%;
  top: 45%;
  width: 50px;
}

.heart-checkbox {
  display: none;
}

.heart::before,
.heart::after {
  content: "";
  background-color: currentColor;
  border-radius: 50%;
  height: 50px;
  position: absolute;
  width: 50px;
}

.heart:before {
  top: -25px;
  left: 0;
}

.heart:after {
  left: 25px;
  top: 0;
}

.heart-checkbox:checked + .heart {
  color: black;
}

<div class="wrapper">
  <input type="checkbox" class="heart-checkbox" id="heart-checkbox">
  <label class="heart" for="heart-checkbox"></label>
</div>

score 1 · Answer 3 · answered May 23 '20 at 21:47

You can use two images red and white for example. and you can also use javascript.

html

<div class="wrapper">
    <a class="a-heart" href="#"><img src="redHeart.png" id="heart" class="red"></a>
</div>

javascript

let heart = document.getElementById('heart');
heart.addEventListener('click',()=>{
    if(heart.classList.contains('red')){
        heart.classList.remove('red');
        heart.classList.add('white');
        heart.src = 'whiteHeart.png';
    }else{
        heart.classList.remove('white');
        heart.classList.add('red');
        heart.src = 'redHeart.png';
    }
});

How can I change color of the heart-button after click?

3 Answers3

html

javascript