HTML Buttons

A great way to invite your subscribers to continue reading your articles is with a simple, stylish HTML “Read More” button. This technique both engages your readers and generates clicks within your mailing. It takes a little bit of HTML know-how to create these buttons in your mailings, but once you are set, you’ll find yourself asking “Why didn’t I try this earlier!?”

Note that this kind of HTML button is actually a formatted table with a colored background and linked text. Remember, when designing for email, HTML tables are your best friend – this case is no exception!

Steps

Navigate to Mailings > Create > Mailing.

After completing the Set-up tab, navigate to the Design tab and click a Story Location.

Click the Story Layout icon to insert a Story Layout.

Once you have a Story Layout set up, click your cursor where you wish to add the HTML button.

Click the Source Code icon in the toolbar to open the source code editor.

The cursor automatically displays at the point in the code where you clicked previously.

Customize the following HTML code to your specific needs (see below for definitions) and then enter the code at the cursor location.

<table style="font-weight: bold;" border="0" cellspacing="0" cellpadding="10" align="left" bgcolor="#005487">
<tbody>
<tr>
<td style="font-family: Verdana;">
<a href="http://www.iamap.org" style="font-size: 12pt; color: #ffffff; text-decoration: none; border-style: none;" target="_blank">Read More</a>
</td>
</tr>
</tbody>
</table>

Click Update.

The button now appears at the desired location with your specified parameters.

Hold On…That’s Too Much Code!

Never fear! Informz has you covered. The tables below explain each piece of the code (tags and properties) so that you know what to modify when you customize the HTML.

HTML Tags

Tag Explanation
<table> Identifies the table used to form the button.
<tbody> Identifies the table body.
<tr> Creates a table row.
<td> Creates table data.
<a> Creates a web link.

HTML Styling

Property Explanation
font-weight: bold; Indicates that the font should be bolded.
border=”0” Indicates there is no border around the table used as the button.
cellspacing=”0” This is similar to cellpadding, but should always be set to "0" to create consistency among email clients. Always include this attribute in tables to ensure that they render properly.
cellpadding=”10” Creates 10 pixels of internal padding around the table content.
align=”left” Aligns the table to the left side of the parent table.
bgcolor="#005487" Creates the background color for the table used as a button based on the color Hex Code.
style="font-family: Verdana;" Identifies the font as Verdana.
href="http://www.iamap.org" Creates the external link reference.
font-size: 12pt; Sets the font to 12 points.
color: #ffffff; Creates the font color for the link based on the color Hex Code.
text-decoration: none; Ensures that the link text is not underlined.
border-style: none; Ensures that there is no border style for the link.
target=”_blank” Opens the link in a new browser tab.

Remember…

While it may seem like a lot, this is just the beginning of what you can do with HTML buttons! Don’t forget, your Advisor is available to help you if you need assistance understanding the HTML nuances involved when creating an HTML button in your mailing.