Skip to content

Commit

Permalink
Vanilla <td>'s replace Bulletproof Buttons
Browse files Browse the repository at this point in the history 
Bulletproof Buttons (button.cm) have click and tracking issues with
Outlook. I replaced them with <td>'s with background colors. Buttons
degrade gracefully, as some clients don’t support border-radius or
background images, though the anchor text and background color display
universally.
  • Loading branch information
@TedGoas
TedGoas committed Apr 29, 2014
1 parent df45047 commit 9b14809
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 73 deletions.
Binary file added assets/bg-btn.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 19 additions & 25 deletions template-default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
}

/* Make bulletproof buttons full width */
a[class="button"] {
table[class="button"] {
width: 100% !important;
}

Expand Down Expand Up @@ -265,18 +265,15 @@
<div style="font-size: 0; line-height: 0; display: none; height: 30px;" class="hh-visible"></div>
<div style="font-size: 22px;line-height: 1;" class="hh-center">Two Columns, Padded</div><br>
Two columns, each with padding on all sides. Columns stack on narrow screens, maintaining said padding.<br><br>
<!-- Bulletproof Button : BEGIN -->
<!-- Modified code from http://buttons.cm -->
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#444444" fillcolor="#444444">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Bulletproof Button</center>
</v:roundrect>
<![endif]-->
<a href="http://www.google.com" style="background-color:#444444;border:1px solid #444444;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;" class="button">Bulletproof Button</a>
</div>
<!-- Bulletproof Button : END -->
<table cellspacing="0" cellpadding="0" border="0" style="border-radius: 3px; background: #444444; background-image: url(assets/bg-btn.png); background-position: top left; background-repeat: repeat-x;border: 1px solid #333333;" class="button">
<tr>
<td style="padding: 15px 20px; font-family: sans-serif; color: #ffffff; font-size: 15px; line-height: 15px; text-align: center;">
<a href="http://www.google.com" style="text-decoration: none; color: #ffffff; display: block;">
<b>A Button</b>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Expand All @@ -301,18 +298,15 @@
<td style="padding: 30px;font-family: sans-serif; font-size: 16px; line-height: 22px; color: #444444;">
<div style="font-size: 22px;line-height: 1;" class="hh-center">Two Columns, One Column Without Padding</div><br>
Two columns; one with padding on all sides and one without padding (good for flush images or columns with a background). Columns stack on narrow screens, maintaining said padding.<br><br>
<!-- Bulletproof Button : BEGIN -->
<!-- Modified code from http://buttons.cm -->
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#444444" fillcolor="#444444">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Bulletproof Button</center>
</v:roundrect>
<![endif]-->
<a href="http://www.google.com" style="background-color:#444444;border:1px solid #444444;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;" class="button">Bulletproof Button</a>
</div>
<!-- Bulletproof Button : END -->
<table cellspacing="0" cellpadding="0" border="0" style="border-radius: 3px; background: #444444; background-image: url(assets/bg-btn.png); background-position: top left; background-repeat: repeat-x;border: 1px solid #333333;" class="button">
<tr>
<td style="padding: 15px 20px; font-family: sans-serif; color: #ffffff; font-size: 15px; line-height: 15px; text-align: center;">
<a href="http://www.google.com" style="text-decoration: none; color: #ffffff; display: block;">
<b>Another Button</b>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Expand Down
84 changes: 36 additions & 48 deletions template-fluid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,36 +131,30 @@
<br><br>
Mauris urna nibh, dictum quis sollicitudin a, placerat eu ipsum.
<br><br>
<!-- Bulletproof Button : BEGIN -->
<!-- Modified code from http://buttons.cm -->
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#444444" fillcolor="#444444">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Bulletproof Button</center>
</v:roundrect>
<![endif]-->
<a href="http://www.google.com" style="background-color:#444444;border:1px solid #444444;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Bulletproof Button</a>
</div>
<!-- Bulletproof Button : END -->
<table cellspacing="0" cellpadding="0" border="0" align="center" style="border-radius: 3px; background: #444444; background-image: url(assets/bg-btn.png); background-position: top left; background-repeat: repeat-x;border: 1px solid #333333;" class="button">
<tr>
<td style="padding: 15px 20px; font-family: sans-serif; color: #ffffff; font-size: 15px; line-height: 15px; text-align: center;">
<a href="http://www.google.com" style="text-decoration: none; color: #ffffff; display: block;">
<b>A Button</b>
</a>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%" style="padding: 40px 20px; font-family: sans-serif; font-size: 18px; line-height: 24px; color: #666666; text-align: center;">
<img src="http://placehold.it/150x150/888888/7777777" alt="alt text" height="150" width="150" border="0" align="center">
<br><br>
Mauris urna nibh, dictum quis sollicitudin a, placerat eu ipsum.
<br><br>
<!-- Bulletproof Button : BEGIN -->
<!-- Modified code from http://buttons.cm -->
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#444444" fillcolor="#444444">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Bulletproof Button</center>
</v:roundrect>
<![endif]-->
<a href="http://www.google.com" style="background-color:#444444;border:1px solid #444444;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Bulletproof Button</a>
</div>
<!-- Bulletproof Button : END -->
<table cellspacing="0" cellpadding="0" border="0" align="center" style="border-radius: 3px; background: #444444; background-image: url(assets/bg-btn.png); background-position: top left; background-repeat: repeat-x;border: 1px solid #333333;" class="button">
<tr>
<td style="padding: 15px 20px; font-family: sans-serif; color: #ffffff; font-size: 15px; line-height: 15px; text-align: center;">
<a href="http://www.google.com" style="text-decoration: none; color: #ffffff; display: block;">
<b>A Button</b>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
Expand All @@ -169,36 +163,30 @@
<br><br>
Mauris urna nibh, dictum quis sollicitudin a, placerat eu ipsum.
<br><br>
<!-- Bulletproof Button : BEGIN -->
<!-- Modified code from http://buttons.cm -->
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#444444" fillcolor="#444444">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Bulletproof Button</center>
</v:roundrect>
<![endif]-->
<a href="http://www.google.com" style="background-color:#444444;border:1px solid #444444;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Bulletproof Button</a>
</div>
<!-- Bulletproof Button : END -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="border-radius: 3px; background: #444444; background-image: url(assets/bg-btn.png); background-position: top left; background-repeat: repeat-x;border: 1px solid #333333;" class="button">
<tr>
<td style="padding: 15px 20px; font-family: sans-serif; color: #ffffff; font-size: 15px; line-height: 15px; text-align: center;">
<a href="http://www.google.com" style="text-decoration: none; color: #ffffff; display: block;">
<b>Full Width Button</b>
</a>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%" style="padding: 40px 20px; font-family: sans-serif; font-size: 18px; line-height: 24px; color: #666666; text-align: center;">
<img src="http://placehold.it/150x150/888888/7777777" alt="alt text" height="150" width="150" border="0" align="center">
<br><br>
Mauris urna nibh, dictum quis sollicitudin a, placerat eu ipsum.
<br><br>
<!-- Bulletproof Button : BEGIN -->
<!-- Modified code from http://buttons.cm -->
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.google.com" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#444444" fillcolor="#444444">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Bulletproof Button</center>
</v:roundrect>
<![endif]-->
<a href="http://www.google.com" style="background-color:#444444;border:1px solid #444444;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Bulletproof Button</a>
</div>
<!-- Bulletproof Button : END -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="border-radius: 3px; background: #444444; background-image: url(assets/bg-btn.png); background-position: top left; background-repeat: repeat-x;border: 1px solid #333333;" class="button">
<tr>
<td style="padding: 15px 20px; font-family: sans-serif; color: #ffffff; font-size: 15px; line-height: 15px; text-align: center;">
<a href="http://www.google.com" style="text-decoration: none; color: #ffffff; display: block;">
<b>Full Width Button</b>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
Expand Down

0 comments on commit 9b14809

Please sign in to comment.