Archived topic
How to exclude hamburger icon from my button styling
5 replies · Started by Adrien on January 30, 2021
Hello,
I have styled all my buttons but they also style the hamburger icon on mobile.
How to exclude hamburger icon from my button styling?
Here is the screenshot to show you : https://tinyurl.com/y57aubmf
Here is the code I've used:
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
background-color: #f56f46;
color: #ffffff;
background-image: linear-gradient(180deg , rgba(245, 111, 70, 0.1), rgba(207, 46, 46, 0.3));
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 14px 24px;
border-radius: 50px;
}Thank you so much for your help.
Hi there,
it might be simpler to contain your CSS to just the buttons you want it applied to.
Which specific buttons do you want to style ?
Are they buttons you add to your content ?
Hey David,
I'd like to apply it to the comment box submit button and the my account page "save profile" button.
I'd like not to have these styles applied to the Hamburger and the search engine button.
Oterhwize all the other buttons im adding to my content are already styled with GPblocks pro (global styles).
For the comment submit button, this should work:
.comments input[type="submit"] {
background-color: #f56f46;
color: #ffffff;
background-image: linear-gradient(180deg , rgba(245, 111, 70, 0.1), rgba(207, 46, 46, 0.3));
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
padding: 14px 24px;
border-radius: 50px;
}How can see the Save Profile button in your account page?
Dear Leo, Thanks for your help! It worked perfectly ;-)
No problem :)
