If you've ever wanted bulletproof buttons that always fit your CTA no matter how big they get, or even multi-line CTAs, here's how:

First make sure you have these xml namespaces:

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office"
 xmlns:w="urn:schemas-microsoft-com:office:word">

The markup:

<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
  <tr>
    <td align="center">

      <!--BUTTON START-->
      <a href="http://www.bing.com" style="display: inline-block; text-decoration: none;">
        <!--[if gte mso 9]>
        <v:roundrect arcsize="7%" stroke="false" fillcolor="#abcdef" href="http://www.bing.com/" style="mso-wrap-style:none; mso-position-horizontal: center">
        <v:shadow on="t" color="#9abcde" offset="0,4pt"/>
        <v:textbox inset="25px,15px,25px,10px" style="mso-fit-shape-to-text: t">
        <![endif]-->
        <div style="background-color:#9abcde; padding-bottom: 5px; border-radius:5px;">
          <center style="background: #abcdef; padding: 15px 25px 15px 25px; border-radius: 5px; font-size:16px; line-height: 16px; mso-line-height-alt: 110%; font-family:Tahoma, Geneva, sans-serif;font-weight:bold;color:#345678; text-decoration:none;" class="mso-flex-btn">

          <div style="Margin:0 0 5px 0">First Line</div>
          <div>Second Line</div>

          </center>
        </div>
        <!--[if gte mso 9]>
        </v:textbox>  
        </v:roundrect>
        <![endif]-->
      </a>
      <!--BUTTON END-->

    </td>
  </tr>
</table>

Fix for undesirable text-wrapping in Outlook 07-13 (place in <head>):

<!--[if mso]>
<style>
.mso-flex-btn {
  margin-right:-0.1in;
  text-indent: -0.1in
}
</style>
<![endif]-->

The key parts to making this work:

  • mso-wrap-style: none allows the shape to expand to the width and height of its contents
  • mso-fit-shape-to-text: t fits the shape to its contents including margins
  • To control the button padding use inset for Outlook 07-13 and padding for everything else.
  • Use <div> for each new line. If you use <br/> Outlook 07-13 forces the button to 100% width.
  • This only works with text, no tables.

While everything looks good in Litmus I haven't field tested this yet, so use it at your own risk. Happy Easter!