Useability Archives - Steven's Homestead

HTML “Button” for Emails

HTML “Button” for Emails

Have you ever been frustrated creating HTML emails with buttons only to see that little red X when you review the email? I have and it is frustrating. With just a little bit of Photoshop and HTML / CSS code you can create a functional button like the one in the email below.

The “View the Digital Edition Here” button is created with a table that has three columns and one row. The first and last cell have images with a link attached and the middle cell is all coded with html and css.

Here is the HTML code:

<table border=”0″ cellpadding=”0″ cellspacing=”0″>

<tr>

<td><a href=”http://www.canontradeshows.com/expo/medevice12/media/DigitalProspectus.pdf” target=”_blank”><img src=”http://canontradeshows.com/expo/email/tssales/allshows13/media/images/prospectus/left.png” width=”35″ height=”42″ hspace=”0″ vspace=”0″ border=”0″ alt=”” /></a></td>

<td style=”font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; color:#000; text-align: center;” bgcolor=”#feb703″><a href=”http://www.canontradeshows.com/expo/medevice12/media/DigitalProspectus.pdf” target=”_blank” style=”text-decoration:none; color:#000;”>View the Digital Edition Here</a></td>

<td><a href=”http://www.canontradeshows.com/expo/medevice12/media/DigitalProspectus.pdf” target=”_blank”><img src=”http://canontradeshows.com/expo/email/tssales/allshows13/media/images/prospectus/right.png” width=”35″ height=”42″ hspace=”0″ vspace=”0″ border=”0″ alt=”” /></a></td>

</tr>

</table>

How to make it work

You first need to develop the ends of your button.  I created the ends by making a small square image with a transparent background.  Then I made a filled circle of yellow and moved half if that off of the square to make the half moon shapes.  After that you insert those into the first to cells and link them to your URL.  Then in the middle cell, insert a URL with the text you want to include as the name of the link.  In the link cell, you want to make sure the background color is the same as your two ends.  When the email renders with images you get the image of the button.  If you are like me and images do not always render with emails you would have the middle cell still showing.