Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed bullet proof buttons in Outlook 2007, 2010 and 2013 #14

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixed bullet proof buttons in Outlook 2007, 2010 and 2013 #14

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
252 changes: 196 additions & 56 deletions salted-responsive-email-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,17 +201,45 @@
<tr>
<td>
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
<tr>
<td align="center" style="padding: 25px 0 0 0;" class="padding-copy">
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
<tr>
<td align="center"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #5D9CEC; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn How &rarr;</a></td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<table width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="mobile-button-container">
<tbody>
<tr>
<td align="center" class="padding-copy">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="responsive-table">
<tr>
<td align="center" bgcolor="#5D9CEC" width="140" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;" class="mobile-button">
<a href="http://www.example.com" style="padding: 10px;width:140px;display: block;text-decoration: none;border:0;text-align: center;font-weight:normal;font-size: 16px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;background: #5D9CEC;border: 1px solid #5D9CEC;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:26px;">
Learn How &rarr;
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
Expand All @@ -225,7 +253,7 @@
<!-- ONE COLUMN W/ BOTTOM IMAGE SECTION -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#f8f8f8" align="center" style="padding: 70px 15px 0 15px;" class="section-padding-bottom-image">
<td bgcolor="#f8f8f8" align="center" style="padding: 52px 15px 0 15px;" class="section-padding-bottom-image">
<table border="0" cellpadding="0" cellspacing="0" width="500" class="responsive-table">
<tr>
<td>
Expand All @@ -246,17 +274,45 @@
<tr>
<td>
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
<tr>
<td align="center" style="padding: 25px 0 0 0;" class="padding-copy">
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
<tr>
<td align="center"><a href="http://alistapart.com/article/can-email-be-responsive/" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #48CFAD; border-top: 15px solid #48CFAD; border-bottom: 15px solid #48CFAD; border-left: 25px solid #48CFAD; border-right: 25px solid #48CFAD; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Hell No &rarr;</a></td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<table width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="mobile-button-container">
<tbody>
<tr>
<td align="center" class="padding-copy">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="responsive-table">
<tr>
<td align="center" bgcolor="#48CFAD" width="140" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;" class="mobile-button">
<a href="http://www.example.com" style="padding: 10px;width:140px;display: block;text-decoration: none;border:0;text-align: center;font-weight:normal;font-size: 16px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;background: #48CFAD;border: 1px solid #48CFAD;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:26px;">
Hell No &rarr;
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr>
Expand Down Expand Up @@ -426,17 +482,45 @@
<tr>
<td align="center">
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
<tr>
<td align="center" style="padding: 0;" class="padding-copy">
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
<tr>
<td align="center"><a href="https://litmus.com/community" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #F6BB42; border-top: 10px solid #F6BB42; border-bottom: 10px solid #F6BB42; border-left: 20px solid #F6BB42; border-right: 20px solid #F6BB42; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More &rarr;</a></td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<table width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="mobile-button-container">
<tbody>
<tr>
<td align="center" class="padding-copy">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="responsive-table">
<tr>
<td align="center" bgcolor="#F6BB42" width="120" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;" class="mobile-button">
<a href="http://www.example.com" style="padding: 10px;width:120px;display: block;text-decoration: none;border:0;text-align: center;font-weight:normal;font-size: 16px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;background: #F6BB42;border: 1px solid #F6BB42;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:16px;">
Learn More &rarr;
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
Expand Down Expand Up @@ -465,17 +549,45 @@
<tr>
<td align="center">
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
<tr>
<td align="center" style="padding: 0;" class="padding-copy">
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
<tr>
<td align="center"><a href="http://templates.mailchimp.com" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #5D9CEC; border-top: 10px solid #5D9CEC; border-bottom: 10px solid #5D9CEC; border-left: 20px solid #5D9CEC; border-right: 20px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More &rarr;</a></td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<table width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="mobile-button-container">
<tbody>
<tr>
<td align="center" class="padding-copy">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="responsive-table">
<tr>
<td align="center" bgcolor="#5D9CEC" width="120" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;" class="mobile-button">
<a href="http://www.example.com" style="padding: 10px;width:120px;display: block;text-decoration: none;border:0;text-align: center;font-weight:normal;font-size: 16px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;background: #5D9CEC;border: 1px solid #5D9CEC;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:16px;">
Learn More &rarr;
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
Expand Down Expand Up @@ -504,17 +616,45 @@
<tr>
<td align="center">
<!-- BULLETPROOF BUTTON -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="mobile-button-container">
<tr>
<td align="center" style="padding: 0;" class="padding-copy">
<table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
<tr>
<td align="center"><a href="http://www.campaignmonitor.com/resources/" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #4FC1E9; border-top: 10px solid #4FC1E9; border-bottom: 10px solid #4FC1E9; border-left: 20px solid #4FC1E9; border-right: 20px solid #4FC1E9; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button">Learn More &rarr;</a></td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<table width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="mobile-button-container">
<tbody>
<tr>
<td align="center" class="padding-copy">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;" class="responsive-table">
<tr>
<td align="center" bgcolor="#4FC1E9" width="120" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;" class="mobile-button">
<a href="http://www.example.com" style="padding: 10px;width:120px;display: block;text-decoration: none;border:0;text-align: center;font-weight:normal;font-size: 16px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;background: #4FC1E9;border: 1px solid #4FC1E9;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:16px;">
Learn More &rarr;
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">&nbsp;

</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
Expand Down