Skip to main content

Hello, I know there is in-the-box functionality of Klaviyo signup forms that allow you to change the color of button when the mouse hovers over it, and that there is not that functionality in the email editor.

 

I’m wondering if it is possible to use CSS to create a color change when a cursor hovers over a hyperlink in an email? 

 

Any insight would be appreciated. 

Hey, great question!

You could add custom CSS to your emails to support hover colors, but I would not rely on them for many reasons, but while most modern email clients can display hover effects, older versions won’t fully support this feature. And there is no hover color on mobile, so remember that.

If you implement, just expect a smaller % of recipients will benefit from your change. 


Hey ​@Dragonslayer1865 ,

As ​@TJ Mapes  has mentioned  that Klaviyo's email editor doesn't support CSS :hover effects. The reason is that most email clients are pretty strict about custom styles. But don't worry, there's a simple workaround. You can use inline styles to change the text color for different states. For example, you can make a hyperlink stand out by bolding it or using a color that pops against the surrounding text. If you're dead set on getting a hover effect, you can try adding this code: <style> a:hover { color: #ff0000 !important; } </style>. Just keep in mind that it won't work in all email clients. Honestly, a better approach is to just make the link a noticeable color from the start. That way, you can be sure it'll look great in any email client. 


Reply