HTML + CSS - Button not returning to initial state after click

Question

I am trying to implement a counter, but right now I'm only working with HTML, CSS and Bootstrap.

<button class="btn btn-purple ts24r">+</button>

.btn-purple {
   background-color: var(--purple);
   color: var(--white);
}

.btn-purple:hover {
   background-color: var(--green);
}

The problem is that when I click my button its background-color disappears and only appears again when I click somewhere else on the page.

The three states of the button: before click, hover and after click

I tried the following code, and it works at first glance, but now the button isn't "clickable" anymore, it stays red (only used for test purpose) and doesn't change color when hovered. As before, it only returns to purple and allows hover when I click elsewhere.

.btn-purple:focus {
   background-color: red;
}

Is there a way to make the button accepts multiple clicks, always staying purple and only changing when hovered (which was the initial state)?

Answer 1

It seems this is an issue with Bootstrap on MacOS and Chrome.

You may do something like below to remove the focus:

<a class="btn btn-purple ts24r" onclick="this.blur();">+</a>

Reference: How to remove focus around buttons on click