Inspiro _ Cchange Background Color of Block-Button when hovering over it

  • Hello everyone,
    I want to change the background color of a text-box when hovering over it. If you check the website (still building) you can see the text-boxes of the different topics will change to green when hovering over them. I would like to change this color or set it to transparent.
    I already read hours of CSS-code and somehow it doesn′t work…

    here is what i tried:

    1. find out what class I have to address by checking the html-format of the box, this is what is shown:

    <div class="wp-block-button is-style-outline"><a href="https://extendhorizon.com/travel-adventures/">Travel Adventures</a></div>

    –> I want to change the background color of the outlined box, but only when hovering over it.

    2. type code in custom css/additional css in customizer:
    wp-block-button is-style-outline:hover {
    background-color: transparent;
    }

    –> should be something like this, but it doesn′t work.

    I am still beginner and would really appreciate help!
    I can also answer more detailed if necessary.
    Thank you!

    • This topic was modified 2 years, 4 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Your CSS code is almost correct – you just need to add dots for the two class names and then set the background colour to none as transparent isn’t an accepted value as far as I’m aware.

    .wp-block-button.style-outline:hover {
background-color: none;
}

    That should make the link colour transparent on hover.

Viewing 1 replies (of 1 total)
  • The topic ‘Inspiro _ Cchange Background Color of Block-Button when hovering over it’ is closed to new replies.

Tags