Hover CSS Stripped Upon Delivery

Josh Mumm 2

Looking for some advice!


I'm building an email with a few buttons which we would like to add some hover properties to. The CSS is pretty simple here, and it works:


<style type="text/css"><!--

.purple-button:hover {

    background-color: #ffffff !important;

    color: #5d0f32 !important;

 }

--></style>


Then in the email:


<tr align="center">

<td>

<div style="width: 370px;">

<table border="0">

<tbody>

<tr>

<td><a class="purple-button" style="color: #ffffff; text-align: center; background-color: #5d0f32; display: block; width: 350px; padding: 10px; font-size: 140%; text-decoration: none; font-family: verdana, arial, helvetica, sans-serif; border: 2px solid #5d0f32;" href="http://action.farmsanctuary.org/site/Ticketing;jsessionid=00000000.app271a?view=Tickets&amp;id=100963" target="_blank">Tickets</a></td>

</tr>

</tbody>

</table>

</div>

</td>

</tr>


This works (as you can see) in my message viewer links: http://action.farmsanctuary.org/site/MessageViewer?current=true&em_id=43759.1


However, when I send test emails, the hover properties don't work, and the CSS for these buttons even seems to be stripped (using inspection tools).


I've tried adding the CSS to my style sheet on my stationery, as well as in the HTML body, and both ways seem to not apply this CSS to the email upon delivery.


Does anyone know why I might be having issues with this? It's really odd that this is the only bit of CSS being stripped.

Philip Nawrocki

Hey Josh,


e-mail is a crazy thing to code for. Not every bit of code will work in every e-mail client.


I tried your code and on my iPhone it is working, but on Outlook it does not hover.

Here is a post as to why:
https://stackoverflow.com/questions/37947069/its-possible-add-hover-on-buttons-in-outlook-2010


Here is a great post from Litmus about creating buttons:
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design


I updated your code a little bit: (take out the tbody tags since those are a spam trap) If only SpamAssasin was working in LO....


<style type="text/css">

.purple-button:hover {

    background-color: #ffffff !important;

    color: #5d0f32 !important;

 }

</style>


<tr align="center">

    <td>

        <div style="width: 370px;">

            <table border="0">

                <tr>

                    <td><a class="purple-button" style="color: #ffffff; text-align: center; background-color: #5d0f32; display: block; width: 350px; padding: 10px; font-size: 140%; text-decoration: none; font-family: verdana, arial, helvetica, sans-serif; border: 2px solid #5d0f32;" href="http://action.farmsanctuary.org/site/Ticketing?view=Tickets&amp;id=100963" target="_blank">Tickets</a></td>

                </tr>

            </table>

        </div>

    </td>

</tr>



Thanks,


Phil

Josh Mumm 2

Sorry for the delay!


Thanks for the tip on the <tbody>, I'll make sure to remove that going forward. 


Interesting to note that the code works on iphone. Like I said, the only two clients I tested it on are Outlook and Gmail (android mobile and desktop) - and it worked on none of these. I think I'll include the button code in emails going forward, and if it works that's a bonus, if not that's perfectly fine. Not going to file this in the "big deal" folder, as I don't think it will affect engagement. 


 

Grace Rose Khalsa

Philip Nawrocki:

Hey Josh,


e-mail is a crazy thing to code for. Not every bit of code will work in every e-mail client.


I tried your code and on my iPhone it is working, but on Outlook it does not hover.

Here is a post as to why:
https://stackoverflow.com/questions/37947069/its-possible-add-hover-on-buttons-in-outlook-2010


Here is a great post from Litmus about creating buttons:
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design


I updated your code a little bit: (take out the tbody tags since those are a spam trap) If only SpamAssasin was working in LO....


<style type="text/css">

.purple-button:hover {

    background-color: #ffffff !important;

    color: #5d0f32 !important;

 }

</style>


<tr align="center">

    <td>

        <div style="width: 370px;">

            <table border="0">

                <tr>

                    <td><a class="purple-button" style="color: #ffffff; text-align: center; background-color: #5d0f32; display: block; width: 350px; padding: 10px; font-size: 140%; text-decoration: none; font-family: verdana, arial, helvetica, sans-serif; border: 2px solid #5d0f32;" href="http://action.farmsanctuary.org/site/Ticketing?view=Tickets&amp;id=100963" target="_blank">Tickets</a></td>

                </tr>

            </table>

        </div>

    </td>

</tr>



Thanks,


Phil

Just catching up after a few weeks of being out of work. This is really fun, and I've been thinking about ways to implement "hover" in our buttons (which are being semi-broken in message viewer and sometimes Outlook - font-size changes upon hover, apparently due to some deep back-end code, sigh). So, happy to see this code.


Also? I'm specifically replying to your comment, Phil, about <tbody> - which is SO ANNOYING because in LO, switching between code (plain text) view and WYSIWYG - which, I know, I know, I shouldn't do, but often have to for internal reasons - as a Convio-based artifact, no matter now often I remove <tbody></tbody>, the code is reinserted by the system. BLACKBAUD: looking at you!! Can't this be repaired? Is it really so difficult???


Thanks,

Gurukarm