UPDATE: This is the HTML button that I finally got to test well in Outlook Windows:
<table width="220" align="center" cellpadding="0" cellspacing="0">
<tr><td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;width:100%;box-sizing:border-box;min-width:100% !important;" width="100%" align="center">
<tr>
<td align="center" style="font-family:sans-serif;font-size:14px;vertical-align:top;padding-bottom:0px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border:solid 3px #ffffff;border-radius:10px;border-collapse:separate;width:220px;" align="center">
<tr>
<td style="font-family:sans-serif;font-size:14px;line-height:24px;vertical-align:top;background-color:#CE5124;text-align:center;padding:12px 20px;" valign="top" bgcolor="#CE5124" align="center"> <a href="https://www.google.com" target="_blank" style="display:inline-block;color:#ffffff;background-color:#CE5124;border:solid 1px #CE5124;border-radius:10px;box-sizing:border-box;cursor:pointer;text-decoration:none;font-size:18px;font-weight:bold;margin:0;text-transform:capitalize;border-color:#CE5124;"><strong style="color:#ffffff;">READ THEIR ANALYSIS</strong></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</table>
ORIGINAL POST:
I’m trying to figure how to take existing HTML email button code (the code I’m using I got from @syfer) but apply a fixed pixel width to it. The existing code uses width: auto;
and that has proven to be necessary in my testing with Outlook, but I still want to be able to control a max pixel width as well, if that makes sense.
This is the code I’m using that has tested well for me (code from @syfer):
<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">Long button text click here</a> </td>
</tr>
</table>
And I’m attempting to nest that table inside a larger table with the fixed pixel width like this:
<table width="100" align="center" cellpadding="0" cellspacing="0">
<tr><td>
<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">Long button text click here</a> </td>
</tr>
</table>
</td></tr>
</table>
However, in testing, desktop Outlook for Windows will ignore that 100px fixed width on the outer table and display the button as auto-width (making it wider than I want it to). The reason I need to keep the auto-width though is because if I switch the auto-width to 100px fixed width (which makes the text break to two lines), Outlook will cut off the bottom line of text.
I really hope I explained that well.
Here are two screenshots of desktop Outlook for Windows and how it displays the button upon testing:
Original button code screenshot
Added outer table with fixed width button screenshot
1