How to add an email button in HTML and CSS
There are several ways to add an email button in HTML and CSS, and you don't have to be a website developer or master coder to do it to ensure your email buttons are bulletproof. Remember, the two most popular ways to add email buttons are by using images with links or HTML.
Mailchimp makes it easy for you to design your email button, including changing your font with content blocks, allowing you to drag and drop to create buttons with ease.
HTML email buttons
HTML email buttons can be full or fixed-width, depending on how you want your button to look next to the rest of the email layout.
To create HTML email buttons, you'll need to custom-code your email template using the following code:
'''< table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#505050; border:1px solid #353535; border-radius:5px;">
<td align="center" valign="middle" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
<a href="http://www.mailchimp.com/blog/" target="_blank" style="color:#FFFFFF; text-decoration:none;">Read More</a>
</td>
As you can see, in this case, your button would read, "Read More." You can also change the font to match your branding and website fonts as you see fit. Of course, the best font for email will depend on your overall branding and design, but we recommend keeping it simple.
Adaptive email buttons
Adaptive email buttons will adapt to the width of the email, depending on the text inside the same cell. These buttons don't have a width specified in the code because they'll follow the same width as the text. The code for adaptive email buttons looks like this:
'''
<td align="center" valign="middle" style="color:#FFFFFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold; letter-spacing:-.5px; line-height:150%; padding-top:15px; padding-right:30px; padding-bottom:15px; padding-left:30px;">
<a href="http://www.mailchimp.com/blog/" target="_blank" style="color:#FFFFFF; text-decoration:none;">Read More Stories On Our Blog</a>
</td>
'''
Luckily, you don't have to know how to code to create the perfect email buttons for your email marketing campaigns. Instead, you can drag and drop a content block into an existing template and edit the HTML as you see fit.