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

score 2 · Answer 1 · answered Aug 19 '22 at 03:39

2

Yes, you could try multiple psuedo-classes for the button.

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

.btn {
  cursor: pointer;
}

.btn-purple {
   background-color: purple;
   color: white;
}

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

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

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

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

answered Aug 19 '22 at 03:39

Viira

3,805
3
16
39

1

I changed part of your code for the expected behavior and it worked just fine. Thanks! – Amanda Barreto Aug 19 '22 at 04:24

charmian · Accepted Answer · 2022-08-19T04:22:21.090

2

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

edited Aug 19 '22 at 04:22

answered Aug 19 '22 at 03:45

charmian

506
2
9

This worked even though I'm not using MacOS or Chrome! Thank you so much – Amanda Barreto Aug 19 '22 at 04:21
@AmandaBarreto You are welcome, it is weird that Bootstrap works well with element but not – charmian Aug 19 '22 at 04:27
Oh, I forgot to say! I used the suggested ```onclick="this.blur();"``` directly in the button element, the `````` tag wasn't needed – Amanda Barreto Aug 19 '22 at 04:38

Isaac Ikusika · Answer 3 · 2022-08-19T03:54:34.853

button:focus means the button will remain in focus (and not clickable) until you click another element.

button:active applies when the button is being activated. So, if you want your button (or any element) to have a particular colour when clicked, you use the pseudo-class.

I guess you can do something like this:

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

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

.btn-purple:active{
  background-color: purple;
}

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

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

3 Answers3