HTML email link in button not working in outlook desktop

Question

I am trying to send an HTML email with a URL that would be accesible on a button click. Here is the code I use:

<div align="left" class="button-container" style="padding-top:40px;padding-right:30px;padding-bottom:40px;padding-left:40px;">
<!--[if mso]>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0; border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
    <tr>
        <td style="padding-top: 40px; padding-right: 30px; padding-bottom: 40px; padding-left: 40px" align="left">
            <v:roundrect
                xmlns:v="urn:schemas-microsoft-com:vml"
                xmlns:w="urn:schemas-microsoft-com:office:word" href="" style="height:39pt; width:198pt; v-text-anchor:middle;" arcsize="4%" stroke="false" fillcolor="#0f8de9">
                <w:anchorlock/>
                <v:textbox inset="0,0,0,0">
                    <center style="color:#ffffff; font-family:Arial, sans-serif; font-size:14px">
                        <![endif]-->
                        <a href="{{ url }}">
                            <div style="text-decoration:none;display:inline-block;color:#ffffff;background-color:#0f8de9;border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;width:auto; width:auto;;border-top:1px solid #0f8de9;border-right:1px solid #0f8de9;border-bottom:1px solid #0f8de9;border-left:1px solid #0f8de9;padding-top:10px;padding-bottom:10px;font-family:Helvetica Neue, Helvetica, Arial, sans-serif;text-align:center;mso-border-alt:none;word-break:keep-all;">
                                <span style="padding-left:20px;padding-right:20px;font-size:14px;display:inline-block;">
                                    <span style="font-size: 16px; margin: 0; line-height: 2; word-break: break-word; mso-line-height-alt: 32px;">
                                        <strong>
                                            <span data-mce-style="font-size: 14px; line-height: 28px;" style="font-size: 14px; line-height: 28px;">Confirm your email address</span>
                                        </strong>
                                    </span>
                                </span>
                            </div>
                        </a>
                        <!--[if mso]>
                    </center>
                </v:textbox>
            </v:roundrect>
        </td>
    </tr>
</table>
<![endif]-->
</div>

It works on most browser email client and some desktop ones as well, but on outlook desktop app the link is not clickable. It also looks a bit strange, here is a print screen:

It looks like the link would be convered by one of the spans and for some reason only active on the text rather then the whole div.

Could someone advise on how to make the whole div active and clickable on outlook desktop ?

Answer 1

Here is what I ended up using, seems to work fine on all email clients tested.

<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="left" style="margin-top:40px;margin-right:29px;margin-bottom:40px;margin-left:40;">
    <tr>
        <td style="background: #0f8de9; text-align: center; padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;">
            <a href="{{ url }}" style="background: #0f8de9; border: 15px solid #0f8de9; letter-spacing: 2px; font-size: 14px; mso-height-rule: exactly; line-height: 60px; text-align: center; text-decoration: none; display: block;">
                &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#ffffff; font-weight: 900">Confirm your email address</span>&nbsp;&nbsp;&nbsp;&nbsp;
            </a>
        </td>
    </tr>
</table>
<!-- Button : END -->

Answer 2

Your code is pretty long and I think Outlook ignores the styles placed in div's inside the anchor tag. Here is a simple button created using html only (no vml) and it renders the same across all email clients.

• To increase the width of the button, change the padding.
• If changing colors: there are 5 instances of the same color.

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
    <tr>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="https://www.google.com" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;" title="Click here to start survey">Click here</a> </td>
    </tr>
</table>

Advantage: You can use the same code, change the colors to make it a bordered button.