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 thetd
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:
<code><tr>
<td align="center" style="
background: red;
padding: 0;
margin: 0;
border: none;
border-radius: 3px;">
<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>
</code>
<code><tr>
<td align="center" style="
background: red;
padding: 0;
margin: 0;
border: none;
border-radius: 3px;">
<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>
</code>
<tr>
<td align="center" style="
background: red;
padding: 0;
margin: 0;
border: none;
border-radius: 3px;">
<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>
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
1