Remove gradient backgrounds from buttons?

[stevenvachon]

They're annoying to override. The simpler the framework, the easier it is to work with.

[ericf]

I don't think we should get rid of the gradients because they make the buttons look more press-able. We have some ideas on how to improving skinning for Pure that could help with creating very basic, skin-less buttons, or we could provide another Buttons classname which is more basic. We engineered the gradient ones to be very easy to override their colors, you can simply do the following:

.pure-button {
    color: #fff;
    background-color: rgb(28, 184, 65); /* green */
}

http://purecss.io/buttons/#customizing-buttons

[stevenvachon]

background-color won't override a gradient, though, because gradients use background-image. When we do want a custom background-image (without background), we have to use !important because Pure CSS has gradients defined on many pseudo-classes.

Is it not a good idea for gradients to be made optional in the skinner tool instead of default? Same with transitions for those who don't want to or cannot code it themselves.

[18601673727]

I'm agree with @stevenvachon, because gradients look like 90s.

[ericf]

Tagged as up for grabs so feel free to issue a PR.

[hlibco]

I also agree with @stevenvachon. It could be nice if it were possible/easier to use some kind of flat buttons.

[michel-tournier]

+1 for flat and gradient-free buttons.

[jmstudio]

I don't think adding or removing them adds or removes anything from this. Why use the default buttons? They even explain on the purecss.io website how to create your own buttons.

[narcis-radu]

@jmstudio depends how you see it: for me, pure is a foundation and I build on top of it. It doesn't make sense to override styles in the foundation. For example, if I'd create a button class, I'd need to override (remove) the gradient. Why not have a gradient-free button and add the style only if needed?

[jmstudio]

yeah, but why remove it? :) It's four lines of CSS 🔢 I am already tired of commenting on this. If you want the gradients removed, I suggest you fork it, and name it pure-flat, then you're all trendy right? Yes, I am kidding. Please stop this nonsense.

[rictorres]

Being only four lines does not make it right.
I have used Pure on a few projects and on each of them I had to override the gradients.

I'm in favour of its removal.

[stevenvachon]

@jmstudio I often don't go with all flat designs because they're hard to decipher. I do, however, get annoyed when having to override the existing gradients. See my other comment above.

[jmstudio]

@stevenvachon you do have a valid point there, but you can extend the existing class as shown in the example so I am in favor of leaving it in. On one side to 'educate' designers to override the default styling and on the other hand to laugh at the ones that didn't.

No in all seriousness, it's SO easy to override so I am in favor of leaving it in.

[tilomitra]

The primary reason we have the gradient in there is so all buttons can have a genuine :hover state. We use a semi-transparent gradient that would automatically give you a semi-decent looking hover state that works with any button color that you have.

If we got rid of the gradient, then everyone would have to specify their own hover states. Which do you guys prefer?

[stevenvachon]

I think it looks very nice and it definitely helps market the library. It's just a bit of a pain for me to always override it in custom designs. However, many people don't need to customize outside of simple colours. I guess leave 'em in, heh.

[jmstudio]

A "pain" to override them? You really can't write 4 extra lines of css? This whole topic is nonsense, as I stated above. PLEASE Yahoo, leave 'em in. They're clear, easy to override and easy to recognize buttons. Well done.