[Resolved] How to make CTA buttons responsive?

[Jarno]

How can i make the standard button responsive when people hover on it?

[David]

Hi there,

Can you explain a little more ? What should happen when the user hovers over it ?

[Jarno]

Like a change in color, so the visitor knows it’s a clickable box. Right now you only know the button works when you click on it.

[David]

You can set the Hover color in Customizer > Colors > Buttons.

If that doesn’t work then the button is being added outside of the theme. Send me a link of the site so i can take a look.

[Jarno]

I linked my website.

At the top you see a button. I changed the hover background color to yellow, but it’s the same when I hover over the button.

What’s the problem here?

[Leo]

I’m not seeing a button in the linked page:
https://www.screencast.com/t/lyfRWLlM8B

Can you confirm?

Please also disable your caching plugin so we can inspect the code better.

Thanks!

[Jarno]

The green CTA button? Above the table of contents?

[David]

Try this CSS:

.wp-block-button .has-vivid-green-cyan-background-color:hover {
    background-color: red;
    transition: background-color 0.3s;
}

If you want better styling control of buttons or special headings you may want to try our GenerateBlocks plugin:

https://wordpress.org/plugins/generateblocks/

[Jarno]

I added the css with the plugin and it works. Thank you for the css code!

Have a great day.

[David]

Glad to be of help

[Author]

Posts