Outlook is not respecting my "button" background color

Question

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:

.

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:

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;
    }

Answer 1

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 -->