Remove Button Shadow Styling #1024

Merged
merged 1 commit into from Dec 23, 2016

Projects

None yet

3 participants

@joviczarko
Contributor
joviczarko commented Sep 21, 2016 edited

I would really like to hear your opinion on this. Thanks folks!

I think gradient styling of the buttons are unnecessary. They have been added long ago as background gradients, then changed in 2012 (#39 by @hugobaeta was merged on 14 Sep 2012 ). Now I think in the flat world we need to completely get rid of those gradients on the buttons.

Reasons for this:

  • I assume everyone has it's own styling of the buttons
  • I think people rarely uses that box shadow effect on buttons and text
  • If we remove it we get flat buttons design. Which is much more used.
  • I remove it in every single project (most impotant reason :) )

But really, I think this styling only complicates _s theme unnecessarily.

Maybe we should add only this code to :hover pseudo class:
background: lighten($color__background-button, 5%);
To create more visible hover effect.

@joviczarko joviczarko Remove Button Shadow
Remove shadow from buttons. Unnecessary styling.
525defe
@jrfnl
Contributor
jrfnl commented Sep 27, 2016

Could you please add some screenshots showing the before and after ?

@joviczarko
Contributor
joviczarko commented Sep 27, 2016 edited

Sure! Sorry for not making previews at the first place.

The Reset button is in hover state.

This is BEFORE
image

This is AFTER
image

Although the design is individual stuff, this shadow styled buttons now belongs to some past times. It is just waste of bytes. I think everyone is removing it on every project. And maybe it is time to be gone...

If we choose this path of simplifying some styling I can work on some other styling stuff to make things more universal. For example making variables or mixins for borders to be consistent trough the site, to add a hover color variable, etc... One word to introduce the refreshed flat theme in underscore.

@karmatosed karmatosed merged commit 9f60f7d into Automattic:master Dec 23, 2016

1 check failed

continuous-integration/travis-ci/pr The Travis CI build failed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment