So I've recently sent an advanced email template to a Gmail account. The gmail account is added as user account in Apple Mail on Yosemite OS mac.

When looking at the email inside Apple mail - fThe HTML button is not showing up. It's not rendering the button color, shape, format.

It is actually showing the text but not keeping the HTML properties/styles for aligning the text and tags. See Screenshot.
http://cl.ly/image/020j370D1v38

SEE BELOW:
I've not included all the styles of my email BUT Here are my styles and HTML that were used in the email.

ANYONE EVER SEEN THIS?? MAYBE GIVE ME A TIP??

<style type="text/css">
/* RESET STYLES */
p{margin:1em 0;}
table{border-collapse:collapse; table-layout:fixed;}
img, a img{border:0; height:auto; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{display:block !important; margin:0 !important; padding:0 !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}

/* CLIENT-SPECIFIC STYLES */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
table{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Outlook.com to display emails at full width. */
p, a, li, td, blockquote{mso-line-height-rule:exactly;} /* Force Outlook to render line heights as they're originally set. */
a[href^="tel"], a[href^="sms"]{color:inherit; cursor:default; text-decoration:none;} /* Force mobile devices to inherit declared link styles. */
p, a, li, td, body, table, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
.ExternalClass, .ExternalClass p, .ExternalClass td, .ExternalClass div, .ExternalClass span, .ExternalClass font{line-height:100%;} /* Force Outlook.com to display line heights normally. */

/* STRUCTURAL STYLES */
.emailContainer{max-width:600px;}
.flexibleColumn{max-width:320px;}
.flexibleGrid{max-width:213px;}

/* CONTENT STYLES */
body{background-color:#e8e8e8;}
img{border-radius:12px;}

#emailArticles{background-color:#202020; padding-top:30px; padding-bottom:10px;}
.articleContent{color:#AEAEAE; font-family:'Helvetica, Arial, sans-serif', Helvetica, Arial, sans-serif; font-size:12px; line-height:16px; text-align:left; background-color:#ffffff;}
.bodycontent{color:#AEAEAE; font-family:'Helvetica, Arial, sans-serif', Helvetica, Arial, sans-serif; font-size:12px; line-height:16px; padding-top:10px; padding-left:60px; padding-right:60px; text-align:left; background-color:#fff;}
.articleContent h2{color:#009db7 !important; font-family:'Helvetica, Arial, sans-serif', Helvetica, Arial, sans-serif; font-size:32px; line-height:34px; font-weight:bold; text-align:center;}
.articleContent h3{color:#FFFFFF !important; font-family:'Helvetica, Arial, sans-serif', Helvetica, Arial, sans-serif; font-size:20px; font-weight:bold; text-align:left;}
.articleContent h5{color:#48C0EB !important; font-family:'Helvetica, Arial, sans-serif', Helvetica, Arial, sans-serif; font-size:14px; font-weight:normal; text-align:left;}
.articleButtonContainer{padding-bottom:10px; background-color:#ffffff;}
.articleButton{background-color:#f3832a; border-radius:3px;}
.articleButtonContent{padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px;}
.articleButtonContent, .articleButtonContent a{color:#ffffff; display:block; font-family:'Helvetica, Arial, sans-serif', Helvetica, Arial, sans-serif; font-size:18px; line-height:18px; text-align:center; text-decoration:none;}

</style>
</head>
<body><style type="text/css">
div.preheader 
{ display: none !important; } 
</style>


<table border="0" cellpadding="10" cellspacing="0" width="100%" >
<tr>
                        <td valign="top" class="articleButtonContainer" align="center"><table border="0" cellpadding="0" cellspacing="0" class="articleButton">
                          <tr>
                            <td align="center" valign="middle" class="articleButtonContent"><a href="###"><strong>VERIFY ACCOUNT</strong></a></td>
                          </tr>
                        </table></td>
                      </tr>
    </table>
    ```