Buttons or Images In Email?

scroll to get the snippets

Hubspot converts CTA Buttons into Images for Email

This is somewhat sad that Hubspot provides no option for call-to-action buttons to display with code instead of images in their html emails, but it is understandable. After all, with great power comes great responsibility. Email clients can ruin buttons if you do not have a good developer

Everest Gives You Button Capability

For users on the button side of the email debate, you will be very happy. Granted, Hubspot’s powerful CTA functionality will not be tied to the custom coded buttons; however, a call-to-action is still a call-to-action, even if you can’t press Hubspot’s magical ‘insert cta’ button.

If Images Are Blocked…

Everest’s buttons won’t be. So should you use our button snippets over Hubspot’s CTAs? We have an answer: “Radio want both!” (Name that movie scene in the comments)

The provided button snippets work across most platforms (even Outlook). Each button is designed with progressive enhancement and works with Everest’s powerful css.

Override Colors

You’ll notice Everest pulls from your set accent color in Hubspot’s content settings. To override this, simply add the code below to your link’s style tag:

background-color: [your-hex-here]!important; border-color: [your-hex-here]!important;

For example:

<div class="everest_button large hover" lang="x-everest_button">
<a href="http://example.com/">A CODED BUTTON</a>
</div>

turns in to:

<div class="everest_button large hover" lang="x-everest_button">
<a style="background-color: [your-hex-here]!important; border-color: [your-hex-here] !important;" href="http://example.com/">A CODED BUTTON</a>
</div>

BUTTON SNIPPETS

<div class="everest_ghost_button" lang="x-everest_button"> <a href="http://example.com/">A CODED BUTTON</a> </div>

<div class="everest_ghost_button accent" lang="x-everest_ghost_button">
<a href="http://example.com/">A CODED BUTTON</a>
</div>

<div class="everest_button large hover" lang="x-everest_button">
<a href="http://example.com/">A CODED BUTTON</a>
</div>

<div class="everest_button hover" lang="x-everest_button">
<a href="http://example.com/">A CODED BUTTON</a>
</div>

Caution

These will display one button per line in Microsoft Outlook. You will need to make an outlook conditional table and place each button in a cell. It is best to use images for multiple buttons in one line. Use at your own risk.

           

<div class="facebook">
<a href="http://example.com/">facebook</a>
</div> &nbsp;&nbsp;
<div class="youtube">
<a href="http://example.com/">youtube</a>
</div> &nbsp;&nbsp;
<div class="twitter">
<a href="http://example.com/">twitter</a>
</div> &nbsp;&nbsp;
<div class="google">
<a href="http://example.com/">google+</a>
</div> &nbsp;&nbsp; <div class="instagram">
<a href="http://example.com/">instagram</a>
</div>

Leave a Reply