HTML email link in button not working in outlook desktop

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 ?

Solution

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 -->