CSS hover rules

Hey,
What css are you using? And where are you adding it?

Hannah

Hi @hannahritner

I’m using the following in the ‘Custom Styles’ area of the email customizer:

.button {
padding: 12px 40px;
background-color:#f78a1d;
text-decoration:none !important;
color:#fff !important;
text-align:center;
text-transform:uppercase;
font-weight:bold !important;
border-radius:3px;
}
.button:hover, a.button:focus {
background-color: #afcd5d !important;
}

Thanks

Sorry, one more question – how are you adding the button to your email template?

Hannah

The text areas take HTML so just
<a href="" class="button">Link Text</a>

Hey,
Hover is not supported in many email clients.

https://www.campaignmonitor.com/css/selectors/hover/

Ben

Hi @britner

That’s not quite the same as not supported at all, from that list it looks like half. Is there a reason why the :hover rule is stripped from the custom CSS?

Thanks

• This reply was modified 5 years, 9 months ago by Richard-B.

Yours is being stripped? Like when you go back in it’s not there?

Ben

It’s completely missing, it’s very odd

Ok, want to make sure we are talking about the same thing, when you go to woocommerce > email customizer and add css into the css box, click save. Then leave and come back your css is gone?
Ben

Ah no sorry that is not whats happening, my CSS remains in the email customizer, however in the email that is sent out there is no CSS in the raw source. The customizers CSS is converted to inline CSS with no hover rules showing anywhere.

Yes that is what woocommerce does for best compatibility with email clients it uses https://www.myintervals.com/emogrifier.php but for hover css it still adds it to the email in a style tag for the clients that support it. What email client are you trying to view in?

Ben

Thanks for the info, that’s really handy.
Ok interestingly enough i’m viewing in Gmail – webmail

Rich

Reading through the documentation it looks like :hover is not supported and probably never will be.
Is there a hook I can use to add a <style></style> of my own to the head of the email?

Rich

Hmm interesting, I tested your css through a demo site and it works for me, the hover css gets pulled into the head.

I don’t believe there is a hook that would let you add style tags into the head tag. I think you would have to override templates.

Ben

Ok solved! I was on version 1.1.5, i’ve updated to the latest and it is working as you experienced in your tests.

Thanks for the support!