[Resolved] How to exclude hamburger icon from my button styling

Home Forums Support [Resolved] How to exclude hamburger icon from my button styling

Home Forums Support How to exclude hamburger icon from my button styling

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1639123
    Adrien

    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.

    #1639313
    David
    Staff
    Customer Support

    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 ?

    #1639698
    Adrien

    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).

    #1639797
    Leo
    Staff
    Customer Support

    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?

    #1640208
    Adrien

    Dear Leo, Thanks for your help! It worked perfectly ๐Ÿ˜‰

    #1640744
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.