CSS not works for anchor tag in Outlook mail

Question

CSS applied to link in Outlook not works

HTML:

<tr>
<a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;"><td style="background-color:#000;height:40px;width:475px;">Click Me</td></a>
</tr>

it only display link to "Click Me" text not to all

Note: It should display link to all td i.e. width:475 & height:40

Please help me

Thanks

Answer 1

You can use outlook specific HTML to fix this

<div><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" stroke="f" fillcolor="#556270">
<w:anchorlock/>
<center>
<![endif]-->
 <a href="http://stackoverflow.com" style="background-color:#556270;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Show me the button!</a>
<!--[if mso]>
</center>
</v:rect>
<![endif]--></div>

Also refer http://buttons.cm/ for creating 'bulletproof' email buttons :)

Answer 2

Try

<tr>
  <td style="background-color:#000;height:40px;width:475px;">
     <a href="http://www.google.com" style="color:#FFF;height:40px;width:475px;display:block;">Click Me</a>
  </td>
</tr>