An important element of a marketing email is the call-to-action, or button, that is used to encourage your recipient to clickthrough to your website. SharpSpring has a Litmus Test feature built into the email designer that allows you to see what your emails look like in Outlook and other email clients. While your buttons may look fantastic in Gmail, they may sometimes fall short when it comes to Outlook. In this article, you'll learn how to add buttons to your emails that look good across the most popular email clients.
The following users can add buttons to SharpSpring emails.
- Marketing Manager
Adding a simple button to an email
Step One: Open your email in the email designer.
Step Two: Hover over the content area where you would like to place the button, and click the pencil icon to edit that content area.
Step Three: Add a link to the email by clicking the + plus sign from the top menu in the content area and click Link. Enter the URL and Text for this link and click OK.
Step Four: Highlight the link that was just added. From the top menu under the + plus drop-down menu, under Formats click Button (only works with links).
Step Five: From the menu on the far left, click the paintbrush icon to open Email Standard Styles and then click the color wheel next to Button to adjust the color of your button.
That's it. If you would like to further customize your button, please see the instructions below on adding a button to the Source Code of a content area.
Adding a custom button to an email
In the email designer, navigate to edit a content area in your email that needs a button, by hovering over that content area and either double clicking or clicking the pencil icon. For more information on content areas and layouts, please refer to our help article Email Designer Settings Overview.
To add the button, simply copy the button code below and paste it at the bottom of the Source Code for that specific content area. Just pick the content area that you want to have the button, click into that content area's Source Code, and paste the button code.
To edit the style of the button, you will need to have knowledge of HTML/CSS to be able to adjust the code within the a href section of the snippet above. Make sure to replace www.sharpspring.com with the link that you’d like to use for the button, and also be sure to replace Click Here! with whatever text you’d like to appear within the button. Below is a rundown of what can be customized within the button code:
- style="font-size: 16px
- font-family: Helvetica, Arial, sans-serif
- color: #ffffff
- text-decoration: none
- border-radius: 3px
- -webkit-border-radius: 3px
- -moz-border-radius: 3px
- background-color: #EB7035
- border-top: 12px solid #EB7035
- border-bottom: 12px solid #EB7035
- border-right: 18px solid #EB7035
- border-left: 18px solid #EB7035
- display: inline-block
Below are screenshots of a content area before and after the button code has been added to the email.