The ultimate guide to HTML email buttons (Part 2)
This guide will explore the best practices for email buttons from a marketing professional and discover details on Stripo’s button experiment. You will then move to email design optimization tips and catchy button examples to win people over. By the end of the guide, you will know how to create functional and effective email buttons.
The previous part lifted the veil and explored different types of email buttons, accessibility, mobile optimization, and tested button colors and text — everything that makes this element work.
Today, I will share tips from Stripo’s expert, discuss best design practices, and review inspiring email button examples. You will be among the first to find out how our team increased button results by 47.62% with a minor change. Let’s dive in.
Best practices for HTML email buttons
Effective HTML buttons are a result of continuous A/B testing and improvements. Stripo’s email marketing team has completed several tests to determine which buttons work best and why. Let’s have a look at the findings.
Choose proper wording and text length
Action-driven and precise HTML buttons stand out from banners or headers. Besides, long button text can feel overwhelming, considering the amount of text readers may go through.
Stripo’s experiment
Our marketing team tested various button texts and found the best performer, which is an experiment we will talk about:
The Stripo team increased button results by 47.62% after changing the wording from “Try now” to “Read more” in the educational materials section.
This minor adjustment improved context and let recipients understand what’s expected of them — together, these factors improved results and proved that word choice is important.
Divide by email button roles
No proper division between button roles can waste marketing efforts and erase differentiation between a prioritized and a secondary action. What is best about this approach is its simplicity, which can be well spotted in the example below.
(Source: Email from Substack)
Substack uses the same font and button size and even places primary and secondary buttons next to each other. Still, “Get the app” grabs attention immediately, while “Start writing” catches up later.
Mind email button surroundings
Multicolored backgrounds have a significant downside: they often draw attention away from email buttons and overwhelm visuals. Try contrasting background images or sticking with one shade so the button does not blend in.
In addition to surroundings, adding an image-based button on the banner is not recommended. Why? In case of poor message loading, the button will disappear, leaving nothing for the recipient to engage with.
Consider email button load times
Buttons are small but mighty elements. However, image buttons can slow the loading and decrease the email’s effectiveness. Since the average screen attention span is only 47 seconds, a few moments of blank email may cost the sender a customer.
Besides image-based buttons, interactivity in buttons can play tricks with loading time and accessibility. Aggressive and flashy animations may trigger seizures in those with photosensitive epilepsy.
Optimize for the dark mode
Failure to consider the email button’s visual in dark mode may play havoc with the reading experience. Apart from the background color change, the button can lose contrast and become an accessibility problem. Let's test a few of the email buttons I received.
The first point is the button’s visual in light mode. According to the Accessible Colors, the contrast ratio is 13.59, which is more than enough. The button is bright and readable, so nothing can go wrong, right?
Alas, the contrast ratio in dark mode is approximately 1.48 out of 4.5 mandatory. Furthermore, the text may blend in with the button background color when opened on a small screen.
Sometimes, the button blends in with the background it’s put on. The contrast between the background image the button is placed on and the button color is only 1.45. The green frame around the image makes the button blend in, reducing its noticeability.
Light mode quickly fixes the issue and brings back button contrast, which is now 11.36.
(Source: Email from Brevo)
Adjust for Outlook
A recent Litmus report shows that almost 8% of 1.3 billion email opens are made in Outlook. This may not be the leading email client, but it still has a solid part of the market share, and the visual changes are significant. Let’s test a button to see how it can turn out:
- the first variant: It is the way the email is supposed to look: the button is rounded and easy to click on;
- the second variant: The option on the right is how the button renders in Outlook: no rounded corners, decreased size, and hard-to-read font.
If you use Stripo to create email templates, you only need to turn the toggle on in the Buttons section to ensure the design's safety in Outlook.
If you are building templates outside of Stripo, make sure to adjust the code using Outlook-targeted comments and test an email before sending it.
Email button examples that catch an eye
One of the best ways to memorize information is through examples, so I suggest that we review email buttons that stand out and grab attention.
Email button examples with different roles
The first example is Stripo’s email with clearly divided buttons: “Explore the Demo” is the primary button, while “Read more” only adds to the message. Color, share, and placement highlight the roles and help avoid dispersed attention.
(Source: Email from Stripo)
The next example uses a similar approach: the primary button is well-shaped and colored, while the secondary element is reflected as hyperlinked text with an arrow.
(Source: Stripo template)
Email button examples for dark mode
As someone who barely remembers what a light mode is, I value companies that consider phone modes and ensure emails look appealing either way. An example below has green, contrasted, and informative buttons that stand out despite the black background.
(Source: Stripo template)
Another example of an email button optimized for the dark mode is below. It immediately catches an eye, but there is no aggressive coloring. The blueish button shade calms the recipient down.
(Source: Stripo template)
Email button examples with action language
The first email template has a strong call-to-action button with encouraging wording: “Help Earth now.” Three words are enough to express the meaning behind the action and motivate a person to participate.
(Source: Stripo template)
The second email for us to explore features button text that matches the text used in Stripo’s experiment. By using this template, you can test one of our best approaches on your subscribers.
(Source: Stripo template)
One more example of precise language encouraging clicks is listed below. The “Order Now” button text is written in the title case for increased visibility.
(Source: Stripo template)
The last example closing this sub-section features another effective email button with a tempting text asking to “Take a gift.” One cannot possibly resist it.
(Source: Stripo template)
Email button examples for various backgrounds
Email button surroundings either make the element fit in naturally or distract the recipient from clicking. An example below has visuals of flowers in the section with the button, but neither aspect blends in.
(Source: Stripo template)
Last but not least, an example of the email button waiting for you is below. Despite the button background, it appears brighter thanks to the color and font choice.
(Source: Stripo template)
Wrapping up
Despite being a small element of email layout, buttons can influence overall message perception and encourage actions. Properly chosen wording and button text length, division by the roles and consideration of all email providers, and loading times make your message functional and visually appealing. It shows the effort and dedication to a positive customer experience, which has a higher chance of being rewarded with loyalty.
I hope this guide has been helpful and that your next email campaign will yield outstanding results. Good luck!