Archived topic
Default CSS Styling for buttons
3 replies · Started by Anthony on November 26, 2022
Hi,
I am using a Child theme of GPP with a Plugin that outputs two buttons as below.
The button element gets a transparent 1px border from the below css. Whereas the A element does not.
I am guessing I can override this with custom CSS, but is there somewhere else where this default is set that should be addressed rather than adding extra CSS? I want to achieve that both As & Buttons look the same.
button, input[type=button], input[type=reset], input[type=submit] {
background: #55555e;
color: #fff;
border: 1px solid transparent;
cursor: pointer;
-webkit-appearance: button;
padding: 10px 20px;
}
<a href="OtherPage.html" class="button">Button #1</a>
<button type="submit" name="b2" value="submit>Button #2</button>
Hi there,
you will need to include the .button selector in your CSS eg.
a.button, button, input[type=button], input[type=reset], input[type=submit]
Hi David,
Thank you for coming back so quickly.
I have not added the above CSS, it appears in the generated stylesheet that GP creates. Where do I find this to tweak it as indicated?
We know that CSS is from GP, as you are trying to override that CSS, what David suggested is you can use this selector a.button, button, input[type=button], input[type=reset], input[type=submit] to override GP's CSS.