CODEWITHSUNDEEP
htmlcssemailoutlookhtml-email
Brad
Brad

Reputation: 81

Outlook is not respecting my "button" background color

I have a content block for an email that is not functioning as I want it to in Outlook. The block also needs to work in mobile and should look like this in browser/desktop:

"Browser/desktop view".

In all browsers this looks perfect, except Outlook. In Outlook, it removes the entire white background colour from the button (it actually reduces it down to the text content) and it looks god awful:

"Outlook 10/13/16 view"

Here is my code for the box:

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
    <td align="center">
        <table bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
            <tr>
                <td width="20"> &nbsp;</td>
                <td align="center">
                    <table border="0" cellpadding="0" cellspacing="0" dir="ltr" width="100%">
                        <tr>
                            <td class="full" dir="ltr" valign="top" width="50%">
                                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <!--TABLE WITH IMAGE PART-->
                                    <tr>
                                        <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td align="center"> <img src="http://placehold.it/170x170" style="display: block; border: 0;" width="170"></td>
                                    </tr>
                                    <tr>
                                        <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td>
                                    </tr>
                                </table>
                            </td>
                            <td class="full" dir="ltr" valign="top" width="50%">
                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                    <!--TABLE WITH TEXT AND TITLE PART-->
                                    <tr>
                                        <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td>
                                        <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td>
                                        <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td align="left" class="font-22c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 20px; text-transform: uppercase;"> Lorem ipsum dolor</td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td height="20"> &nbsp;</td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td align="left" class="font-16c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 16px; line-height: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td height="20"> &nbsp;</td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td width="20"> &nbsp;</td>
                                        <td class="cta" bgcolor="" width="" style="-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 0px;font-family: Century Gothic; padding-top: 0px; padding-bottom:0px; font-weight:;"> <a class="cta" href="http://www.example.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0 ; text-align: center;font-weight: bold; font-size: 14px; font-family: Century Gothic, Helvetica, Arial, sans-serif; color: #8b8b93; background: #ffffff; border: 1px solid #8b8b93; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:30px;">LORUM IPSUM</a> </td>
                                        <td width="20"> &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td>
                                        <td height="15" style="font-size: 1px; line-height: 1px;"> &nbsp;</td>
                                        <td style="font-size: 1px; line-height: 1px;" width="20"> &nbsp;</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
                <td width="20"> &nbsp;</td>
            </tr>
        </table>
    </td>
</tr>

And the class CTA is as follows:

cta {
        margin: auto;
        display: inline-block;
        background:#ffffff !important;

    }
    /* BUTTON STYLES */

    cta {
        padding: 15px 15px;
        width: 150px;
        font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, sans-serif !important;
        font-size: 14px;
        font-weight: bold;
        color: #8b8b93;
        background: #ffffff !important;
        border: 1px solid #8b8b93;
        font-weight: bold;
        align-content: center;
    }

Upvotes: 4

Views: 4768

Answers (2)

Ted Goas
Ted Goas

Reputation: 7587

Unfortunately it requires a lot more code than it should to get a button displaying well and being clickable in Outlook. Something like this should do the trick (no CSS in the <style> necessary unless you want to do :hover effects):

<!-- Button : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="border-radius: 3px; background: #FFFFFF; text-align: center;">
            <a href="http://www.google.com" style="background: #FFFFFF; padding: 15px; border: 1px solid #8b8b93; font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; font-weight: bold;">
                <span style="color:#8b8b93;">A Button</span>
            </a>
        </td>
    </tr>
</table>
<!-- Button : END -->

Upvotes: 5

l.g.karolos
l.g.karolos

Reputation: 1142

Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.

So I think is better to directly set the background-color to your Html tag than in your css file

Upvotes: 0

Related Questions