Block contact form: change hover colour of the submit button

  • Unknown's avatar
    elisamctaggart · Member ·

    HI there,

    I’m in a bit of a CSS rabbit hole… hoping someone can help!

    I changed the hover colour on all buttons on my website with the following code, which worked for all button except the “submit” button in the contact form block (contact page). It’s bugging me that it’s 1 button!

    CSS 1

    }
    /* Change button color when hovering | 4964582 – ZD | NS */
    a:hover.wp-block-button__link {
    background-color: #8fc5b3 !important;
    }

    Example of button hover change success (See button is next to the section with the photo of the laptop/cuppa): https://wildscribe.com.au/about/

    Button of button hover colour fail — it’s still orange: https://wildscribe.com.au/contact/

    I’ve tried to find the class for this button, which I think is .wp-block-jetpack-button and I tried this CSS but it hasn’t worked — still orange!

    This is my draft code I’m playing with

    CSS 2

    }
    /* Change contact button color when hovering | 4964582 – ZD | NS */
    a:hover .wp-block-jetpack-button { background-color: #8fc5b3;
    }

    it’s a button that sits within a form so is there another level of CSS I need to include. Do I need to put in a separate CSS or is there something I can add into CSS 1 to apply to all buttons including the Submit button in the contact form?

    I’d also like to change the hover colour of the 4 social media icons in my footer of the website that are also hovering orange so if someone can help with CSS for that, that’d be amazing!

    Hope that makes sense!

    Thanks in advance :)

    Elisa

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    elisamctaggart · Member ·

    Aha! I just cracked the CSS ! Button hover colour is changed, Of course it resolved after I posted here.

    Now, I’m still troubleshooting the CSS to change the colour of the social media icons now :)

  • Unknown's avatar
    elisamctaggart · Member ·

    Oh, crap — false alarm: while the hover colour changed on the jetpack contact form “submit” button, it’s now reverted to orange elsewhere on my website.

    This is the CSS I used to change the Jetpack contact form button hover colour

    }
    /* Change contact button color when hovering in Jetpack contact form| 4964582 – ZD | NS */
    .wp-block-jetpack-contact-form .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
    border: solid 1px #8fc5b3;
    background-color: #8fc5b3;
    }

    And this is the other CSS that is still in there to change the button hover colour generally.

    }
    /* Change button color when hovering | 4964582 – ZD | NS */
    a:hover.wp-block-button__link {
    background-color: #8fc5b3 !important;
    }

    Is there a way to combine so it’s not one or the other?

    A real puzzler (for me, anyway).

  • Unknown's avatar
    elisamctaggart · Member ·

    OK. It worked now. All buttons are now hovering aqua. I don’t know how I cracked it but it’s OK now.

    So I am now just working out the same issue for the social media icons in the footer — I want them hovering the same aqua colour as buttons.

    And I’d also love help with CSS for changing the colour of the widget social media icon in sidebar to black with hove colour aqua. I’ve tried recommended codes but they’re not working. I’m wondering if the theme is preventing the coilour change and if there’s a css workaround.

  • The topic ‘Block contact form: change hover colour of the submit button’ is closed to new replies.