HTML Table Button in Email Template

Question

I'm trying to make a nice HTML button for my email (don't want to use images), and I took the initial design idea from Facebook, the button renders nicely in my browser, but not in Outlook. Does anyone know what I can do to fix it?

The design is on our site, and the code for the button is as follows:

<td valign='middle' style='width:92px;padding-left:0px;text-align:right;white-space:nowrap; !important'>
<div style='height:32px !important;'>
    <a href='".site_url()."export/export_timesheet?id=".$timeID."' style='color:#3b5998;text-decoration:none;'>
        <table cellspacing='0' cellpadding='0' width='100%' height='33' style='border-collapse:collapse;border-width:1px;border-style:solid;display:block;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;font-size:14px;border-color:#2C729E;height:33px !important;'>
            <tbody>
                <tr><td height='7' colspan='3' style='line-height:7px;'>&nbsp;</td></tr>
                <tr>
                    <td width='16' style='display:block;width:16px;'>&nbsp;</td>
                    <td width='100%' style='text-align:center;'><a href='".site_url()."export/export_timesheet?id=".$timeID."' style='color:#2C729E;text-decoration:none;display:block;'><center><font size='3'><span style='font-family:Helvetica Neue,arial,sans-serif;font-style:normal;white-space:nowrap;font-size:14px;'><strong>Get PDF</strong></span></font></center></a></td>
                    <td width='16' style='display:block;width:16px;'>&nbsp;</td>
                </tr>
                <tr><td height='7' colspan='3' style='line-height:7px;'>&nbsp;</td></tr>
            </tbody>
        </table>
    </a>
</div>
</td>

But when it renders in Outlook it looks like this:

I don't care about the rounded edges, but I would like the height to work properly. Does anyone know how I can fix this? I've tried forcing the height with no luck.

Answer 1

Try this:

<table width="92" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="33" valign="middle" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #2C729E; border:1px solid #2C729E;">
      <a href="" style="color: #2C729E; font-weight: bold; text-decoration: none;">Get PDF</a>
    </td>
  </tr>
</table>

I have the anchor tag on the text instead of around the <td> itself. It has been a long time since I tested it that way, so I just posted what I know works.

Also, you do know that javascript can't be used in html email right? You'll have to execute that stuff server side before sending.