Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Buttons in Outlook 2007, 2010, 2013 and 2016

I am getting this stroke inside of the button for a email I'm coding. It only appears in Outlook 2007, 2010, and 2013 and I can't figure out how to remove it? Any ideas?

enter image description here

Code:

`<a href="http://buttons.cm" style="color: #ffffff; background: #a52023; 
 border: 1px solid #a52023;  display: inline-block; font-family: tahoma;
 font-weight: 900; letter-spacing: 2px; font-size: 16px; border-radius: 80px;
 line-height: 60px; text-align: center; text-decoration: none; width: 275px;
 -webkit-text-size-adjust: none; mso-hide: all;">GET FREE WORKWEAR</a>`
like image 466
bhood Avatar asked Nov 16 '25 23:11

bhood


1 Answers

Yea, Windows Outlook 2007, 2010, 2013, and even 2016 all have spotty support for the box model. To get a nice-looking, clickable button working (unfortunately) requires a lot more code.

Might need to play with the border thickness, padding, and number of &nbsp;s, but this should solve your issue and give you a decent-looking, working button across all email clients (including Outlook):

<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
    <tr>
        <td style="border-radius: 3px; background: #a52023; text-align: center;">
            <a href="http://www.google.com" style="background: #a52023; border: 15px solid #a52023; font-family: tahoma; font-weight: 900; letter-spacing: 2px; font-size: 16px; mso-height-rule: exactly; line-height: 60px; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: 900; text-transform: uppercase;">
                &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff">Get Free Workwear</span>&nbsp;&nbsp;&nbsp;&nbsp;
            </a>
        </td>
    </tr>
</table>
<!-- Button : END -->
like image 83
Ted Goas Avatar answered Nov 18 '25 12:11

Ted Goas