Button hover & .btn-default styling #8786

Closed
quasipickle opened this Issue Jul 29, 2013 · 20 comments

Projects

None yet
@quasipickle

I suppose I could have posted in the BS3 thread, but at some point individual topics about BS3 need to have their own thread.

Buttons

  • I don't think the hover colour change is drastic enough. On all but the green button, I can barely discern any colour change. I think the change should be more obvious - especially because most people have bad eyesight.
  • There's no "plain" button any more. To me this seems like quite a stark omission. I can think of many cases where I don't want all my buttons to stick out as much as black-on-white.

Navbar
.navbar-text and .navbar-btn aren't vertically aligned with .brand. You can see this here: http://twbs.github.io/bootstrap/components/#navbar-buttons

List groups & Panels
Love these. Great addition.

@cvrebert
Member

Filed a separate issue for the navbar: #8790. Refocusing this issue on the button stuff.

@cvrebert cvrebert referenced this issue Jul 29, 2013
Merged

WIP: Bootstrap 3 #6342

120 of 126 tasks complete
@pastur
pastur commented Jul 29, 2013

There should be a button class that is clearly secondary, based on color saturation. That's the point of having primary and secondary buttons. Light gray looks secondary versus blue. Black vs blue is not so obvious.

@cvrebert cvrebert referenced this issue Jul 30, 2013
Closed

btn class? #8828

@sslepian

@pastur Maybe something like this? It's just the .btn class with border-color: #AAAAAA. It'd need a better hover-state too, since the default hover state changes the text color to white, which is obviously unreadable on that button.

bootstap_buttons

@cvrebert
Member

Related issue from #8827:

the 'pressed' state for the js buttons plugin is the same as the mouseover state. With standard buttons, this works fine, but it's ambiguous for toggleable buttons.

@pastur
pastur commented Jul 31, 2013

@sslepian I think the border makes the button look smaller. I was thinking in something more like this:

buttons

@fender
fender commented Jul 31, 2013

Need a secondary button for sure. I like that one @pastur but with dark grey text and a very slightly darker background color.

@pastur
pastur commented Jul 31, 2013

Second try:

captura1

@fender
fender commented Jul 31, 2013

+1

@joezimjs
joezimjs commented Aug 2, 2013

+1 I like @pastur's second try. We need to get this done.

@mdo mdo closed this in 2ee9bea Aug 5, 2013
@mdo
Member
mdo commented Aug 5, 2013

screen shot 2013-08-05 at 9 04 47 am

Kapow!

@joezimjs
joezimjs commented Aug 5, 2013

I preferred the idea of having a "secondary" style, but I guess this sticks more with the conventions throughout the rest of the code. Also, this is now the only button style that has a visible border. Not necessarily a bad thing, but it doesn't seem to fit in.

@mdo
Member
mdo commented Aug 5, 2013

Also, this is now the only button style that has a visible border

@joezimjs I've addressed that in another commit ;).

@PHLAK
Contributor
PHLAK commented Aug 14, 2013

I understand the changes made to buttons with RC2, but now I want the dark button back for certain purposes. I can make this myself, but feel a dark button is useful to have as a default option. Could be .btn-inverse or .btn-dark

@cvrebert
Member

We specifically dropped .btn-inverse for being non-semantic; .btn-dark isn't any better in that respect.

@SharpNoiZy

+1 for btn-dark

@quasipickle

@mdo In my opinion the contrast in the red button isn't enough. Good improvement on the rest of them though.

@sergio-toro

+1 for btn-dark

@shaund
shaund commented Aug 17, 2013

+1 for btn-dark

We're switching back to rc1 because the new default button doesn't fit in with the rest of the buttons.

Accessibility is also an issue, the border is too thin for some people to see, and so they do not realize it's a button until this fact is pointed out to them.

@quasipickle

@shaund Wouldn't it be better to just tweak the CSS than reverting back to a broken RC?

@SharpNoiZy

@quasipickle
We did the same like @shaund on exact same reasons.
We hope that RC3 will reinvent the dark button, so that we don't have to create our own style, because that is the reason to use bootstrap, to not define our own styles. ;)

@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
@mdo mdo (less) Fixes #8786 (part 1): darken hover states on buttons 1519aa1
@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
@mdo mdo (less) Fixes #8786 (part 2): new default button styles 1844122
@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@mdo mdo (less) Fixes #8786 (part 1): darken hover states on buttons 79c1af9
@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@mdo mdo (less) Fixes #8786 (part 2): new default button styles 5291933
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment