Happy Email Button Row Example

Below an image of the button row as it is rendered in an email in both pure HTML and VML/HTML versions. Please also find the actual HTML-below for both types.

HTML:

VML/HTML

To use the HTML replace the href=" with the URL you composed according to documentation!

Please note, VML-below the first snippet!

<!--this is the HTML button row! -->
<div><table border="0" cellspacing="0" cellpadding="0"><tbody><tr><td style="text-align:left; font-size:14px" align="left"><a href="/" style="height:0;width:0;text-decoration:none !important; color:#ffffff !important;display:none;">&nbsp;</a><!--[if (gte mso 9)|(IE)]><table border="0" cellspacing="0" cellpadding="0"><tr><td valign="top" align="left"><![endif]--><div style="width:100%; max-width:280px; display:inline-block; vertical-align:top"><table cellspacing="0" cellpadding="0" style="display:inline-block;"><tbody><tr><td style="font-size:14px; line-height:0pt; text-align:left" width="40"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size:14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">0</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td width="7" style="font-size:18px; line-height:0pt; text-align:left"></td><td style="font-size:14px; line-height:0pt; text-align:left" width="40"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size:14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">1</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td width="7" style="font-size:18px; line-height:0pt; text-align:left"></td><td style="font-size:18px; line-height:0pt; text-align:left"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size: 14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">2</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td width="7" style="font-size:18px; line-height:0pt; text-align:left"></td><td style="font-size:18px; line-height:0pt; text-align:left"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size: 14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">3</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td width="7" style="font-size:18px; line-height:0pt; text-align:left"></td><td style="font-size:18px; line-height:0pt; text-align:left"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size: 14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">4</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td width="7" style="font-size:18px; line-height:0pt; text-align:left"></td><td style="font-size:18px; line-height:0pt; text-align:left"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size: 14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">5</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td style="font-size:18px; line-height:0pt; text-align:left" width="7"></td></tr></tbody></table><table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size:18px; line-height:0pt; text-align:center; width:100%; min-width:100%"><tbody><tr><td height="10" style="font-size:18px; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td></tr></tbody></table></div><!--[if (gte mso 9)|(IE)]></td><td valign="top" align="left"><![endif]--><div style="width:100%; max-width:235px; display:inline-block; vertical-align:top"><table border="0" cellspacing="0" cellpadding="0" style="display:inline-block;"><tbody><tr><td style="font-size:18px; line-height:0pt; text-align:left" width="40"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size: 14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">6</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td width="7" style="font-size:18px; line-height:0pt; text-align:left"></td><td style="font-size:18px; line-height:0pt; text-align:left"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size: 14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">7</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td width="7" style="font-size:18px; line-height:0pt; text-align:left"></td><td style="font-size:18px; line-height:0pt; text-align:left"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size: 14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">8</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td width="7" style="font-size:18px; line-height:0pt; text-align:left"></td><td style="font-size:18px; line-height:0pt; text-align:left"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size: 14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">9</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td width="7" style="font-size:18px; line-height:0pt; text-align:left"></td><td style="font-size:18px; line-height:0pt; text-align:left"><table border="0" align="left" cellpadding="0" cellspacing="0"><tbody><tr><td align="left"><table border="0" cellpadding="0" cellspacing="0" width="40"><tbody><tr><td align="center" bgcolor="#ff7ea5" width="40" height="40"><a href="/" style="width:40px;display: block;text-decoration: none;border:0;text-align: center;font-size: 14px;font-family: sans-serif;color: #ffffff;background: #ff7ea5;line-height:40px;"><span style="color:#ffffff; text-decoration:none">10</span></a></td></tr></tbody></table></td></tr></tbody></table></td><td style="font-size:18px; line-height:0pt; text-align:left" width="7"></td></tr></tbody></table><table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-size:18px; line-height:0pt; text-align:center; width:100%; min-width:100%"><tbody><tr><td height="10" style="font-size:18px; line-height:0pt; text-align:center; width:100%; min-width:100%">&nbsp;</td></tr></tbody></table></div><!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--><a href="/" style="height:0;width:0;text-decoration:none !important; color:#ffffff !important;display:none;">&nbsp;</a></td></tr></tbody></table></div>
<!--this is the HTML button row! -->
<!--this is the VML button row! -->
<div><a href="/" style="height:0;width:0;text-decoration:none !important; color:#ffffff !important;display:none;">&nbsp;</a><table><tbody><tr><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">0</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">1</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">2</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">3</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">4</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">5</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">6</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">7</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">8</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">9</a><!--[if mso]></center></v:rect><![endif]--></div></td><td><div><!--[if mso]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="/" style="height:50px;v-text-anchor:middle;width:50px;font-size:16px;" stroke="f" fillcolor="#ef80b2"><w:anchorlock/><center><![endif]--><a href="/" style="background-color:#ef80b2;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:50px;font-size:16px;-webkit-text-size-adjust:none;">10</a><!--[if mso]></center></v:rect><![endif]--></div></td></tr></tbody></table><a href="/" style="height:0;width:0;text-decoration:none !important; color:#ffffff !important;display:none;">&nbsp;</a></div>
<!--this is the VML button row! -->