Button hover colour

Posted in: Newspaper
Post count: 494

Hi,

I changed one of my buttons for the wordpress one as explained on this page: https://forum.tagdiv.com/increase-users-engagement-add-custom-buttons-posts/

Here is the post concerned: https://www.mondeoz.com/equipement-voyage/meilleur-sac-a-dos-voyage/
The button text is “Consulter le prix du Quechua Forclaz Travel 50”, this is the first one on the post.

How can I change the hover colour for background and text? And how can I remove the border?

Thanks for your help

Post count: 494

Hi again,

When I use your method (through the classic editor), the main colours (background and text) won’t change from the theme colour. I applied a blue, following the instructions on the page above, but I still see my website main colour (kinda green). What am I missing?

When I add a Gutenberg button, and choose on the right panel the background and text colours, I see the chosen colours once saved. But the hover colours are still a problem…

Post count: 35449

Hi,

Unfortunately the hover color can be change only with custom css, here is an example -> http://prntscr.com/p0otbk
.td_round_btn:hover {
background-color: #e34!important;
}

feel free to change the color.
Also you can change the background color of button by selecting the button text -> Please make sure that you do not have a plugin conflict, please deactivate ALL plugins except tagDiv Composer, also if you are using child theme or cache plugin, deactivate them, clear all cache and try again. and the color of text http://prntscr.com/p0p1ie -> http://prntscr.com/p0p212

Thank you!

Post count: 494

Thanks for your reply Calin but it seems that you didn’t see my second message: the theme color applies instead of the one I chose (talking about the main color, not the hover one). What’s the problem? Can you help me fixing it?

Moreover, do I have to paste your CSS code on both Custom Code (desktop) and Mobile in the Theme Panel or just in the desktop field?

Thanks

Post count: 35449

Hi,

That was the implementation for classic editor, the button color will be the accent color of the theme, using the Gutenberg editor you can choose the the color -> http://prntscr.com/p11k7j using the classic editor you need to set the background how I said above.

If you are not using the mobile theme, you can set the code in Theme panel> Custom code> Custom css and the code will be apply on all displays/device.

Thank you!

Post count: 494

Hi Calin,

1/ The code:

.td_round_btn:hover {
background-color: #e34!important;
}

Does not word for changing Gutenberg buttons hover color.

2/ For your buttons (round large), is there another way to change the main color rather than a CSS custom code?

Thanks

Post count: 35449

Hi,

You can try this custom css for the Gutenberg buttons -> http://prntscr.com/p18n31
.single .td_round_btn:hover {
background-color: red!important;
}

Unfortunately this is the only way for the moment to set the hover background color on buttons in editor.

Thank you!

Viewing 7 posts - 1 through 7 (of 7 total)
The forum ‘Newspaper’ is closed to new topics and replies.