Outlook Web Responsive Email

Responsive Email Template doesn't show buttons and footer isn't aligned properly on outlook web. Attached is the code and screen shot of the result in outlook web and the desired o

Solution 1:

Sounds like you need bulletproof email buttons! It's possible to get buttons like this email, but it requires more code than it would on the web / email clients with decent box model support:

<tdalign="center"><!-- Button 1 : Begin --><tablerole="presentation"cellspacing="0"cellpadding="0"border="0"align="center"style="margin: auto; display: inline-block;"><tr><tdstyle="border-radius: 4px; background: #f6c095; text-align: center;"><ahref="http://www.google.com"style="background: #f6c095; border: 10px 20px 8px 20px; solid #f6c095; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
                    Contact Account Manager
                </a></td></tr></table><!-- Button 1 : END --><!-- Button 2 : Begin --><tablerole="presentation"cellspacing="0"cellpadding="0"border="0"align="center"style="margin: auto; display: inline-block;"><tr><tdstyle="border-radius: 4px; background: #3d4a7c; text-align: center;"><ahref="http://www.google.com"style="background: #3d4a7c; border: 10px 20px 8px 20px; solid #3d4a7c; font-family: sans-serif; font-size: 13px; line-height: 13px; text-align: center; text-decoration: none; color: #ffffff; display: block; border-radius: 4px;"">
                    Ignore Advice
                </a></td></tr></table><!-- Button 2 : END --></td>

---

This is one of a few similar techniques, outlined on Litmus.

Solution 2:

For this, i use a table :

<tablecellpadding="0"cellspacing="0"border="0"width="150"bgcolor="#000000"class="cta-black"style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; border-collapse: collapse; mso-padding-alt: 0pt 0pt 0pt 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; background: #000000;"><tbody><tr><tdclass="separator"height="10"style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;">&nbsp;</td></tr><tr><tdalign="center"mc:edit="selection-1-cta"style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;"><ahref="#"target="_blank"style="border: none; color: #ffffff; text-decoration: none; outline: none !important; font-family: 'Montserrat', sans-serif; font-size: 13px; display: block;">VOIR LE PRODUIT</a></td></tr><tr><tdclass="separator"height="10"style="margin: 0; font-family: Arial; -webkit-text-size-adjust: none; color: #575757; clear: both; float: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 5px !important; line-height: 5px !important;">&nbsp;</td></tr></tbody></table>