Skip to content
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

Button Outline Light visibility #23351

Closed
itisparas opened this issue Aug 12, 2017 · 5 comments
Closed

Button Outline Light visibility #23351

itisparas opened this issue Aug 12, 2017 · 5 comments

Comments

@itisparas
Copy link

itisparas commented Aug 12, 2017

I would like to bring to the notice of the developers of bootstrap about a button issue. We will be using .btn-outline-light in dark background. It's visibility is alright in dark background but on hover the background color of the button becomes same as that of button text. On hovering the button with class='.btn-outline-light' the text must be dark.
image

@mdo
Copy link
Member

mdo commented Aug 12, 2017

Ah yeah, we should make sure background-color is set to transparent.

@prateekgoel
Copy link
Contributor

@mdo If we make background-color set to transparent that there won't be distinguishable hover effect. I think we should do something about the text color.

@itisparas
Copy link
Author

@mdo I think @prateekgoel is right in that there won't be distinguishable hover effect. According to me the solution to this is that the .btn-outline-light button must be removed as what I noticed is that .btn-outline-secondary works really very fine in dark background and is very similar to the .btn-outline-light button. Rest upon you. Thanks.

@fran-worley
Copy link

fran-worley commented Aug 13, 2017

@Psingl I actually choose to use btn-outline-light over secondary on really dark backgrounds (the text colour used in secondary is just too dark for me), so simply removing it wouldn't be an option.

In principle, outline buttons should follow a standard pattern. Regular display should be as they are currently, and on hover they should revert to the standard non-outline equivalent. This seems to be the case for all but the outline-light.

mdo added a commit that referenced this issue Aug 14, 2017
Uses some if/else action to ensure there's readable text on hover. Swapped out a hex value to a variable while I was in there.

Fixes #23398, fixes #23351.
@mdo mdo added the has-pr label Aug 14, 2017
mdo added a commit that referenced this issue Aug 15, 2017
Uses some if/else action to ensure there's readable text on hover. Swapped out a hex value to a variable while I was in there.

Fixes #23398, fixes #23351.
@mdo mdo mentioned this issue Aug 15, 2017
@mrlife
Copy link
Contributor

mrlife commented Sep 6, 2017

On hover, it would make sense to match the standard light button's text color of #111.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants