-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Outline buttons have the same active and hover color #39085
Comments
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. |
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:
and mobile:
|
Prerequisites
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:
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:
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
The text was updated successfully, but these errors were encountered: