Outline buttons have the same active and hover color

[xeron]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Outline buttons have the same active and hover color, making them barely usable on mobile where hover stays after the tap, making an impression that active state didn't change.

Sort of workaround applying 15% shading to the button:

.btn-outline-calculator {
  @include button-outline-variant($gray-100);
}
.btn-outline-calculator:hover {
  background-color: shade-color($gray-100, 15%);
}

But I think such shading should be enabled by default?

Another solution might be to use JS to remove hover from the button after some timeout on mobile devices, but I don't exactly know how to do it.

Reduced test cases

With dark themed HTML:

<button aria-pressed="true" class="btn btn-outline-light active" data-bs-toggle="button">Text</button>

Testing on iOS, pressing the button doesn't change the color at all which is very confusing.

What operating system(s) are you seeing the problem on?

iOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.1

[theodorejb]

I noticed this issue too (it can be reproduced right on the docs page: https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons). I expected the outline buttons to have the same active background color as the non-outline buttons.

[xeron]

Kinda related article: https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/

After reading this I changed my workaround to:

.btn-outline-calculator {
  @include button-outline-variant($gray-100);
}
.btn-outline-calculator:hover {
  background-color: shade-color($gray-100, 15%);
}
@media (hover: none) {
  .btn-outline-calculator:hover {
    color: $gray-100;
    background-color: transparent;
  }
  .btn-outline-calculator.active:hover {
    color: #000;
    background-color: $gray-100;
  }
}

And now it works exactly like I'd expect it to work for both desktop:

• active is gray with black text
• not active is transparent with text
• hover is like active but with 15% shading

and mobile:

• active is gray with black text
• not active is transparent with text
• hover matches active / not-active and doesn't get in the way at all (basically hover effect disabled)