How to change the background-color of a button multiple times, in just one click?

Question

Kindly take a look at a GIF here that I've screen recorded on my device featuring an example of a button that turns green and then turns back to the original color, and then turns to green, all of this after one click only:

How can I achieve this? All I've got is this one. And then I don't know what to do next to achieve that kind of animation. Please help.

.query__choice {
  height: 2rem;
  margin: 0.3rem 0.75rem;
  border-radius: 5px;
  font-size: 1em;
  border: 1px solid lightgrey;
  color: black;
}

.query__choice:hover {
  font-weight: bold;
  border: 2px solid lightgrey;
  color: black;
}

.query__choice:active {
  text-decoration: none;
  color: black;
  border: 2px solid rgb(57, 235, 57);
  background: green;
}

<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B"></p>
<p class="query__choice" id="choice-C"></p>
<p class="query__choice" id="choice-D"></p>

Answer 1

A CSS only solution.

.query__choice {
  height: 2rem;
  margin: 0.3rem 0.75rem;
  border-radius: 5px;
  border: 1px solid lightgrey;
}
.query__choice:hover {
  border: 2px solid lightgrey;
}

.query__choice {
  animation:
   change 0.3s linear 6 alternate, /* run the animation 6 times with alternate so we get 3 go-back*/
   h 2s ; /* this will block the above animation on page load (2s > 0.3s*6) */
}
.query__choice:active {
  border: 2px solid rgb(57, 235, 57);
  /* on active (click) we change one of the two animations so that it's changed back
     on unclick and it will get triggered */
  animation:
   anything, /* a random name here */
   h 2s; /* we keep the "blocking" animation so it won't get triggred and block again (yes it's crazy ...)*/
}

@keyframes change {
  to {
     background:green;
  }
}
@keyframes h {
   0%,100% {background:initial;}
}

<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B"></p>
<p class="query__choice" id="choice-C"></p>
<p class="query__choice" id="choice-D"></p>

You can even consider CSS variable to have a different color for each button

.query__choice {
  height: 2rem;
  margin: 0.3rem 0.75rem;
  border-radius: 5px;
  border: 1px solid lightgrey;
}

.query__choice:hover {
  border: 2px solid lightgrey;
}

.query__choice {
  animation:
   change 0.3s linear 6 alternate, /* run the animation 6 times with alternate so we get 3 go-back*/
   h 2s; /* this will block the above animation on page load */
}
.query__choice:active {
  border: 2px solid rgb(57, 235, 57);
  /* on active (click) we change one of the two animations so that it's changed back
     on unclick and it will get triggered */
  animation:
   anything, /* a random name here */
   h 2s; /* we keep the "blocking" animation so it won't get triggred and block again (yes it's crazy ...)*/
}

@keyframes change {
  to {
     background:var(--c,green);
  }
}
@keyframes h {
   0%,100% {background:initial;}
}

<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B" style="--c:red"></p>
<p class="query__choice" id="choice-C" style="--c:blue"></p>
<p class="query__choice" id="choice-D" style="--c:purple"></p>

Answer 2

I created an example with javascript. I write an animation and repeated it 3 times.

document.querySelectorAll(".query__choice").forEach(p => {
  p.addEventListener("click", () => {
    p.classList.add("active");

    setTimeout(() => {
      p.classList.remove("active");
    }, (500 * 3))
    // 500 * 3 = animation-duration * animation-iteration-count
  });
});

.query__choice {
  height: 2rem;
  margin: 0.3rem 0.75rem;
  border-radius: 5px;
  font-size: 1em;
  border: 1px solid lightgrey;
  color: black;
}

.query__choice.active {
  animation-name: button;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: 3;
}

.query__choice:hover {
  font-weight: bold;
  border: 2px solid lightgrey;
  color: black;
}

.query__choice:active {
  text-decoration: none;
  color: black;
  border: 2px solid rgb(57, 235, 57);
}

@keyframes button {
  50% {
    background: green;
  }
}

<p class="query__choice" id="choice-A"></p>
<p class="query__choice" id="choice-B"></p>
<p class="query__choice" id="choice-C"></p>
<p class="query__choice" id="choice-D"></p>