I have been trying to get a button to look a specific way in an email template but am struggling with the width of an a tag on old Outlook (version 2405)

What I want is the a element to fill the td element so that the whole red space is clickable

• Red button = td element
• Blue border = a element

In new Outlook

In old Outlook

• My a element width does not fill the width of the td element.
• For some reason the link is clickable on the left side outside of the border but not on the right
• Text on span is not white but instead standard link color. This makes the color change when clicked

Here is my code:

<table>
<tr>
    <td align="center" style="
    background: red;">
        <a href="https://google.com" target="_blank" style="
        border: 3px solid blue;
        text-decoration: none;
        display: block;
        color: white;
        text-transform: uppercase;
        padding: 30px 0;
        font-weight: 700;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
        cursor: pointer;
        letter-spacing: 0.0625em;">
            <span>
                MY BUTTON
            </span>
        </a>
    </td>
</tr>
</table>

I am slowly but surely losing my mind at this point...

I've tried this solution but no luck

I've tried:

• changing inline-block to block
• changing width
• using !important on text color

---

UPDATE

I modified the accepted answer to make it look like I wanted:

<table>
<tr>
    <td align="center" style="
    background: red;">
        <a href="https://google.com" target="_blank" style="
        border: 3px solid blue;
        text-decoration: none;
        display: block;
        text-transform: uppercase;
        padding: 30px 0;
        font-weight: 700;
        font-size: 14px;
        box-sizing: border-box;
        cursor: pointer;
        letter-spacing: 2px;"><!--[if mso]><i style="mso-font-width:245%;" hidden>&emsp;&emsp;&emsp;&emsp;</i><span><![endif]-->
            <span style="color: rgb(255,255,255) !important">
                MY BUTTON
            </span>
            <!--[if mso]></span><i style="mso-font-width:245%;" hidden>&emsp;&emsp;&emsp;&emsp;&#8203;</i><![endif]-->
        </a>
    </td>
</tr>
</table>

To me it's good enough!

Outlook Desktop Windows doesn't support changes to the display. You can visually change the size of the box by using the <td>, but the only way to increase the size of the clickable area is to add inline characters inside the <a>. Since inline characters cannot be set to a width, you have to use something   which an em space (won't be visible). You can then make that 500% (max) wide, and/or use multiple of them.

mso-text-raise can be used as padding-top and padding-bottom. The first reference should be double the size of the second for equal top and bottom padding.

<table cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
    <td align="center" style="
    background: #ff0000;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 3px;">
        <a href="https://www.google.com.au" style="background-color:#ff0000; text-decoration: none; padding: 30px 0; color: #ffffff; display:block; border-radius:3px; mso-padding-alt:0;text-underline-color:#ff0000;width:100%;text-align: center;font-size:14px;font-weight:700;cursor: pointer;letter-spacing: 0.0625em;"><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:60px" hidden>&emsp;&emsp;&emsp;&emsp;</i><span style="mso-text-raise:30px;"><![endif]-->My button<!--[if mso]></span><i style="mso-font-width:500%;" hidden>&emsp;&emsp;&emsp;&emsp;&#8203;</i><![endif]-->
        </a>
    </td>
</tr>
</table>

This is 600px wide. I managed to get the Outlook clickable area extending to about 580px. Outlook desktop windows is like a print (PDF) layout, so don't bother trying to make it responsive, just figure out the exact pixels (well... inches and points, it will convert them to!)