Hover button

  • Author
    Posts
  • #161542

    nestorvr18
    Member

    Hello!

    In my contact forms, I would like to change the button’s hover. Now the button has a black background and white characters and the hover is transparent. I would like the black background to change to #980705 colour.
    How can I do it?

    Thank you!

    Kind regards,

    The blog I need help with is nestorvr.com.

    #161550

    tarasdashkevych
    Theme Author

    Hi Nestor,

    The background color of the button in your contact form during a hover state is gray. Since a background color of your block with a contact form is also gray, it seems like it’s transparent.

    To change a background color of the button in your contact form during a hover, please add this custom CSS:

    
    .contact-form .wp-block-button .wp-block-button__link:hover {
      background-color: #980705;
      border-color: #980705;
      color: #ffffff;
    }
    

    Let me know if you have any additional questions.

    Kind regards,
    Taras

    #161558

    nestorvr18
    Member

    Thank you, it has been so helpful!

    And how can I do it for the other buttons? Like the red ones to hover to black.

    I’ve tried this:

    wp-block-button .wp-block-button__link:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #980705;
    }

    What I am doing wrong?

    Thank you as always!

    #161570

    tarasdashkevych
    Theme Author

    Nestor,

    I’ve inspected buttons on your front page and most of them have “style” attribute which changes a color of the button. It seems like you’ve set a custom color for your buttons using the block options. In this case, the block adds inline style to the button.

    Inline CSS cannot be overwritten by your site’s CSS unless you use !important. It’s not a very recommended way of changing styles on the site but this is the only way to override inline styles.

    
    .wp-block-button .wp-block-button__link:hover {
      background-color: #ffffff !important;
      border-color: #ffffff;
      color: #980705;
      opacity: 1;
    }
    

    This CSS will override all block buttons background color during a hover state.

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

The topic ‘Hover button’ is closed to new replies.