Outline checkbox toggle button state indistinguishable when hovered

[patrickhlauke]

https://v5.getbootstrap.com/docs/5.0/forms/checks/#outlined-styles has the exact same visual style for a checked and unchecked button when hovered. This makes it unintuitive to use, and a pain to debug when needed as you constantly have to move your mouse back away from the control you just clicked to see what its actual state is.

Sequence of what currently happens (from left to right): 1) unchecked, not hovered; 2) unchecked, hovered; 3) checked, hovered, focused; 4) unchecked, hovered, focused. (for ease of seeing what's happening, I forced the underlying checkbox to remain visible)

Note that the focus itself is not at fault here either: 1) unchecked, not hovered; 2) checked (and then moved focus away again), hovered.

[patrickhlauke]

Mulling this over, perhaps the simplest change would be not to have the change to "solid background with white text" on hover at all on unchecked+hovered case...just leave the style the same as unchecked non-hovered outline button

[mdo]

Thinking #28999 would address this if we go that route. I think I've changed my tune on the outline buttons for this very reason. Thoughts?

[patrickhlauke]

oh i hadn't seen #28999 - yes, that would certainly disambiguate the whole thing. kind of a halfway between the current situation and my more radical "not have the change on hover at all" mulling above.