NO BUG: Hover mode not working on front end

[Sophia123]

I’m not sure this is a bug - but I’ve watched every video tutorial on creating a hover effect and read through the other posts related to this problem, and haven’t been able to solve my issue.

I have some buttons on my header template and I am trying to change the border outline color when one hovers over a button. It works great in preview, but doesn’t work on the front end. I’ve tried using “Settings - Theme styles - Element Form - Button” in hover effect mode, and also tried using changing the button border in hover mode without theme styles. Neither makes a difference though. Can you give me some advice? Thank you!

[Matej]

Hey,
yeah, this should work. Do you have a link to the website, so that I see why it’s not working? Can you also take a screenshot of the settings where you set the hover effect?

Thanks,
Matej

[Sophia123]

Yes, here’s the screenshot. I emailed the link to my page. Thank you for looking at this!

[Matej]

Hi @Sophia123,

thank you for the screenshot. I can also see a link to the website from a screenshot, as I have not received any email, or maybe I’ve missed it.

Anyway, I’ve checked the website, and it seems that some colors are missing from the CSS. Are those colors something that you created, or they are from external CSS framework?

[Sophia123]

I created custom color variables for white and blue and used the white variable for the button border for the non-hover position. Should I also create custom color variables for the “hover” color?

Thanks!

[Matej]

Hey,

With the additional info, I’ve checked the generated CSS for the colors, and I found this inside the generated CSS:

Can you check if you have somewhere as an input that “<!DOCTYPE…” part? Additionally, does the “hover” effect work on other pages, If you use the same header element?

[Sophia123]

That was it! Somewhere along the way I wrote some custom CSS in the settings section. Thank you so much for finding this - it solved my problem.

[robertobze]

it’s also much easier, I find and so do many others, to write the hover css in the custom code for button element.

%root% {
} to style your botton

%root%:hover {
} to apply your hover styles.

[Matej]

Perfect, I’m happy that it’s solved now and that it works as intended Thank you for confirming, I’ll mark this topic as no bug.

@robertobze

it’s also much easier, I find and so do many others, to write the hover css in the custom code for button element.

Yeah, that’s also one way to write it and it’s totally fine. Just make sure to do it on a class, so you can apply it to more than one button.

Matej