how do I add a hover color on the "blog comment submit" button?

[JoKi]

Hello all,

As the title suggests, is it possible to add a color to the submit button when hovered?

"Verzenden" is "submit" in english

[localpathcomp]

Yes. Using developer tools identify the class of the button and add this CSS in your stylesheet:
.your-class:hover {
background: #ffffff;
}

[JoKi]

Thank you for your reply,

I tried what you suggested but it seems not to work.

If I'm correct I highlighted the class name here right?

So I added this:

.blog-button:hover {
background: #000000 !important;
}

[localpathcomp]

Do you see how there's a span tag nested in that span tag? Try this:

.blog-button span:hover {
   background: #000;
}

This CSS says any span element that is a descendant of any element with the class .blog-button should have this styling.

You can use the !important decleration if needed but what is the link to your site? It would make it very easy

[JoKi]

link to a post is:
https://jokitravels.weebly.com/blog/14-singapore

When hovering it now becomes black and I have no idea why it does that...

[localpathcomp · Accepted solution]

Your CSS is:

span.blog-button:hover {
       background: #000;
}

This says "any span element with the class blog-button should have a black background on hover"

Some pics to see. Depending on where you place your CSS may determine its specificty but try the global header as a start and only use the !important declaration if absolutely neccessary.

[JoKi]

Thank you for your reply.

Call me dumb, but I cannot get it to work. I tried with the color red just to see the difference but nothing happens.

This is where I pasted it at the bottom:

/* Buttons
--------------------------------------------------------------------------------*/

/* Small structure & regular style */

.wsite-button-inner,
.wsite-button,
.blog-button span {
font-family: 'Quicksand', sans-serif;
font-size: 18px;
font-weight: 400;
background: none;
border: none;
background: transparent !important;
background-image: none !important;
border-radius: 3px;
}

span.blog-button:hover {
background: #cc0000;
}

[localpathcomp]

Maybe try the !important declaration. But have you tried a hard refresh on your browser to get the updated style sheet? shift+ctrl+r for chrome? The style ahead of it has an !important declaration also i think i see

[JoKi]

Tadaaaa, Looks like the code needed a good night of sleep. It seems to work now.

Thank you very much for your help!