Visual difference between disabled and active btn-secondary is very low

denormative
创建于
2017-01-25 00:25:46

I've just been working with a lot of "secondary" buttons and have noticed that there's actually very little contrast between the active and disabled variants. It's not as noticeable when done side-by-side, but I've found myself having to mouse over buttons to confirm they're disabled rather then visually checking.

https://jsbin.com/hidamelina/edit?html,output

Firefox on linux (centos7) seems to be better due to thicker default font choice in comparison to chrome.

chrome-secondary

firefox-secondary

Not sure what could be done to increase the contrast. Making the disabled font even lighter would help, but that would probably decrease readability. Alternatively perhaps making the inner-border of the active btn-secondary thicker would improve the contrast

4条回答
janaagaard75
回复于
2017-02-03 21:29:09
#1

I think the issue is that the secondary button is an outline button by default. Making it a filled button like the others solves the issue. The design that I am thinking of is apparently already included in the source, as a button without any modifier, i.e. simply class="btn".

screen shot 2017-02-18 at 21 03 00

https://run.plnkr.co/plunks/lRsSbcAvhEhkmi4TGgTw/

janaagaard75
回复于
2017-03-07 12:59:49
#2

Is it possible to get an official comment on this? I wouldn't mind making a pull request to change this, but would, of course, like to know up front, if there is a chance that this would get accepted.

mdo
回复于
2017-03-28 05:18:44
#3

No planned changes here for now; we have the same styles applied to all our buttons. I know it's not perfect, but we'll want to revisit them all together and limit the one-off styles.

janaagaard75
回复于
2017-03-28 07:15:18
#4

I know it's not perfect, but we'll want to revisit them all together and limit the one-off styles.

Will gladly help when to get to that. :)

当前位于第1页,总计4 条回复

推荐相似问题

Tabs navigation with <button> instead of <a>

I noticed in bootstrap 3 and 4 that <a> tags are used for the top navigation. http://v4-alpha.getbootstrap.com/component
讨论数 2
bootstrap
创建时间:2017-01-24 19:26:30

Possibly unintended behavior for modal margins

In v4-alpha-6, there is some possibly unintended behavior for modal margins. In the current setup, modals have margin: $
讨论数 2
bootstrap
创建时间:2017-01-24 18:35:52

Div id mismatch in docs for modal

In the documentation on Modals, there is a Live Demo with the following code <!-- Button trigger modal --> <button type=
讨论数 3
bootstrap
创建时间:2017-01-24 18:19:36

Tooltip.destroy() is missing a null check for that.$element

Tooltip.destroy() is missing a null check for that.$element. Without it a Uncaught TypeError: Cannot read property 'off'
讨论数 8
bootstrap
创建时间:2017-01-24 17:55:24

Feature: File input button

<input type="file" /> has always been very hard to style. I've seen that there is a .custom-file but this shows the file
讨论数 3
bootstrap
创建时间:2017-01-24 12:50:43

Feature Request: Grid System with (real) margins gutter (2nd try)

I posted this issue ~2 years ago, and it was rejected (see #16358) Now, that with the last alpha version, bootstraps who
讨论数 5
bootstrap
创建时间:2017-01-24 09:38:32

Fail on the last Build

Fail on saucelabs-qunit:all see : https://travis-ci.org/twbs/bootstrap/jobs/194740775 /CC : @mdo (Because the build fail
讨论数 2
bootstrap
创建时间:2017-01-24 08:41:39

What's wrong with the cursor the buttons?

Why does not change the cursor when I point the arrow on the button? http://v4-alpha.getbootstrap.com/components/buttons
讨论数 2
bootstrap
创建时间:2017-01-23 23:39:34

Rename .bg-faded to .bg-light?

When I see *-inverse, I think of its counterpart as *-light (ie. navbar-inverse and navbar-light). It might be too late,
讨论数 4
bootstrap
创建时间:2017-01-23 23:02:21

More contrast for .table-striped and .table-hover with .table-inverse

Tables with .table-striped and .table-hover look same as .table-inverse only. Colors need to be more contrasted.
讨论数 3
bootstrap
创建时间:2017-01-23 18:47:26