Site logo

Archived topic

Button Selector Styling

7 replies · Started by Carson on November 25, 2018

Viewing posts 1–8 of 8

Hi,

I just noticed that "/wp-content/themes/generatepress/style.min.css" applies this to every button on the website:

button,html input[type=button],input[type=reset],input[type=submit]{border:1px solid transparent;background:#666;cursor:pointer;-webkit-appearance:button;padding:10px 20px;color:#fff}

What's the reasons for this? Do I have any other option besides styling every button I implement separately with "!important"?

Hi there,

this is for consistency, and allows all buttons to be styled from the one customizer interface.
You can overwrite the CSS by making the selector more specific. ie. string the CSS classes associated with the button.

For example if you wanted to add different color buttons in your markup you could do:

<a class="button green-btn" href="URL">My green button</a>

And then use button.green-btn as your selector.

It would make way more sense to use a more specific selector for the Generatepress theme stylesheet.

In your example the button would still have these attributes:
button,html input[type=button],input[type=reset],input[type=submit]{border:1px solid transparent;background:#666;cursor:pointer;-webkit-appearance:button;padding:10px 20px;color:#fff}

I'd still have to rewrite all of them with updated values for every new button I create.

I'm not sure I understand. What would the more specific selector be?

In the style sheet of the theme you find the following:

button,html input[type=button],input[type=reset],input[type=submit]{border:1px solid transparent;background:#666;cursor:pointer;-webkit-appearance:button;padding:10px 20px;color:#fff}

Following that, every button you create on your website starts with a background color, padding and color. Meaning, every time you create a new button you have to set padding to 0 change the color etc.

Why would you add these values to every button instead of using a specific selector for buttons that are theme related, like "button.generatepress-btn"?

It's added for consistency, so all buttons across the theme look the same. Without that CSS, buttons like the one to leave a comment or one for a contact form would look completely different than your other buttons.

In your case, I would create a class with your custom styling, and apply it to buttons that need no padding etc..

I get the consistency thing, but for example my contact form button looks different anyway (wpforms) and if it didn't it would be easy to add the color etc. Other than the comment one I couldn't name any other wordpress button that you don't apply a custom class to anyway and where I'd need that styling.

On the other hand we just implemented a slightly bigger application only to realize that it looks completely different onpage because every button is styled by the theme.

IMO it would make more sense to apply a custom class to the buttons you want to style than to apply the styles to every button on the website. We fixed the problem now, but it seemed kind of backwards.

Just some feedback on your otherwise amazing theme!

Thank you! Always appreciate feedback :)

This archived topic is closed to new replies.