Dots around button and hover colour

The site is now live, here’s the link if needed. Cheers ??

https://leafletlion.uk/

Hi Mike,

I’m seeing some sort of dots around my buttons when they are clicked on. Can these be removed?

Yes, for future reference, this is the “focus” state. ??

Here’s the CSS for removing that:

.wp-element-button:focus, .wp-block-button__link:focus {
    outline-style: inherit;
}

I also need to change the hover colour of just two individual buttons. Is there some CSS I can use to do this?

The best way for that might be to add specific classes to these elements. Can you share the buttons you’re referring to so I can provide some recommendations?

Hi Felipe. Again, worked perfectly so thank you.

Regarding the buttons, it’s just the two that are in the hero section of the home/leaflet distribution page and the leaflet printing page. As they are on a dark background and when you hover over them they go dark.

I’d just like to change the hover background to something like a #EAEDEB background with #22382B text.

Hi again!

Happy that it helped!

Regarding the buttons, it’s just the two that are in the hero section of the home/leaflet distribution page and the leaflet printing page. As they are on a dark background and when you hover over them they go dark.

As both buttons would have the same colors, can you add a CSS class on these two buttons, so this will make things easier if you need to apply the same in the future?

You can select the block and add it in Advanced > Additional CSS classes:

Full Size: https://d.pr/i/ubZwjN

In this case, I added “mycustombutton”, but can add something more descriptive (like “button-dark-background”). Then, you can try something like that:

.mycustombutton .wp-block-button.is-style-outline .wp-block-button__link {

color: #22382B;
background-color: #EAEDEB;

}

It is possible that this won’t work, but let me know once you add the CSS class and the name of the class, so I can check further.

Thank you, Felipe.

I’ve added everything as instructed but it’s not affecting anything as yet.

Just to confirm as well it’s only the hover colour that I need to change. Any other info you need from me just shout and thank you again for your help with this…

Hi @mikehindle, can you confirm the class that you added there? This way, I can check the HTML for your site and find the CSS for it.

Hi Felipe. I added ads per your example, so using mycustombutton.

Hope that helps and any other info you need just let me know…

@mikehindle Can you try that below?

.mycustombutton a:hover {

color: #22382B !important;
background-color: #EAEDEB !important;

}

Perfect! It’s now working, thank you, Felipe. Really appreciate your help.

Yay, my pleasure!

PS: If you would like to give a review for the theme, it is always appreciated! You can see more here: https://www.ads-software.com/support/theme/twentytwentyfour/reviews/?view=all#new-post

Of course. Done!