From 9838fd1a3c6bde95697f33c9410264999ea8fd35 Mon Sep 17 00:00:00 2001
From: unknown <jbaker@WS-JBAKER.Corp.WD>
Date: Fri, 2 Oct 2015 15:07:05 -0400
Subject: [PATCH] Fixed bullet proof buttons in Outlook 2007, 2010 and 2013

---
 salted-responsive-email-template.html | 252 ++++++++++++++++++++------
 1 file changed, 196 insertions(+), 56 deletions(-)

diff --git a/salted-responsive-email-template.html b/salted-responsive-email-template.html
index 253be34..4f1b853 100644
--- a/salted-responsive-email-template.html
+++ b/salted-responsive-email-template.html
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>