Title: CSS hover rules
Last modified: May 15, 2019
---
# CSS hover rules
* Resolved [Richard B](https://wordpress.org/support/users/richard-b/)
* (@richard-b)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/)
* Hi, firstly this is a great plugin, best i’ve used for Woocommerce emails.
* My issue is when I add custom CSS for a button and add a hover state the rule
is not added to the email that is sent out.
Is there any way of doing this?
* Thanks in advance.
Viewing 15 replies - 1 through 15 (of 15 total)
* [hannah](https://wordpress.org/support/users/hannahritner/)
* (@hannahritner)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11534416)
* Hey,
What css are you using? And where are you adding it?
* Hannah
* Thread Starter [Richard B](https://wordpress.org/support/users/richard-b/)
* (@richard-b)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11534436)
* Hi [@hannahritner](https://wordpress.org/support/users/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
* [hannah](https://wordpress.org/support/users/hannahritner/)
* (@hannahritner)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11534645)
* Sorry, one more question – how are you adding the button to your email template?
* Hannah
* Thread Starter [Richard B](https://wordpress.org/support/users/richard-b/)
* (@richard-b)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11534791)
* The text areas take HTML so just
`Link Text`
* Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
* (@britner)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11535131)
* Hey,
Hover is not supported in many email clients.
* [https://www.campaignmonitor.com/css/selectors/hover/](https://www.campaignmonitor.com/css/selectors/hover/)
* Ben
* Thread Starter [Richard B](https://wordpress.org/support/users/richard-b/)
* (@richard-b)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11535675)
* Hi [@britner](https://wordpress.org/support/users/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 7 years, 1 month ago by [Richard B](https://wordpress.org/support/users/richard-b/).
* Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
* (@britner)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11535706)
* Yours is being stripped? Like when you go back in it’s not there?
* Ben
* Thread Starter [Richard B](https://wordpress.org/support/users/richard-b/)
* (@richard-b)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11536374)
* It’s completely missing, it’s very odd
* Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
* (@britner)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11536382)
* 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
* Thread Starter [Richard B](https://wordpress.org/support/users/richard-b/)
* (@richard-b)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11537186)
* 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.
* Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
* (@britner)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11539107)
* Yes that is what woocommerce does for best compatibility with email clients it
uses [https://www.myintervals.com/emogrifier.php](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
* Thread Starter [Richard B](https://wordpress.org/support/users/richard-b/)
* (@richard-b)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11539121)
* Thanks for the info, that’s really handy.
Ok interestingly enough i’m viewing
in Gmail – webmail
* Rich
* Thread Starter [Richard B](https://wordpress.org/support/users/richard-b/)
* (@richard-b)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11539147)
* 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 of my own
to the head of the email?
* Rich
* Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
* (@britner)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11539224)
* 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
* Thread Starter [Richard B](https://wordpress.org/support/users/richard-b/)
* (@richard-b)
* [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11539359)
* 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!
Viewing 15 replies - 1 through 15 (of 15 total)
The topic ‘CSS hover rules’ is closed to new replies.
* 
* [Kadence WooCommerce Email Designer](https://wordpress.org/plugins/kadence-woocommerce-email-designer/)
* [Frequently Asked Questions](https://wordpress.org/plugins/kadence-woocommerce-email-designer/#faq)
* [Support Threads](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/)
* [Active Topics](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/reviews/)
## Tags
* [css](https://wordpress.org/support/topic-tag/css/)
* [hover](https://wordpress.org/support/topic-tag/hover/)
* 15 replies
* 3 participants
* Last reply from: [Richard B](https://wordpress.org/support/users/richard-b/)
* Last activity: [7 years, 1 month ago](https://wordpress.org/support/topic/css-hover-rules/#post-11539359)
* Status: resolved