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 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 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 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 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 ago](https://wordpress.org/support/topic/css-hover-rules/#post-11534791)
 * The text areas take HTML so just
    `<a href="" class="button">Link Text</a>`
 *  Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [7 years 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 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 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 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 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 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 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 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 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 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 <style></style> 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 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 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.

 * ![](https://ps.w.org/kadence-woocommerce-email-designer/assets/icon-256x256.png?
   rev=3115863)
 * [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 ago](https://wordpress.org/support/topic/css-hover-rules/#post-11539359)
 * Status: resolved