We’ve all seen it: the cringeworthy blue link in email.
By default, the link style in HTML email is blue underlined and after it’s clicked, it turns purple underlined.
While writing this article and chatting with my colleague Tessa, the thought came to her – “who decided that?”
There are some theories and this one seems to have the most conclusive answer: https://blog.mozilla.org/en/internet-culture/why-are-hyperlinks-blue-revisited/
Default colours for a link and a clicked link
These link colours are especially unhelpful when you have a link against a dark background and, in all probability, it doesn’t fall in line with your intended styling of the email.
As with my previous blog post about coding emails for dark mode there are a few solutions available and there is, once again, the hard way or the smart way.
The hard way
The first solution is to use styling in the head of the email and by using classes in your code to tell the email clients and devices how to display the links. This way is also restrictive as you might need different link styles in your email meaning you will need to set up different styles with different Class names for your code.
Style in the head
<style type=”text/css”>
.FixBlueLinks a {
color:#ffffff !important;
text-decoration: none !important;
}
</style>
Code in email referencing the class to set the style for the link
<p class=”FixBlueLinks”>https://www.cantaloupedigital.com/</p>
The smart way
Our second and preferred solution is much easier and therefore smarter in our opinion and one we found to work well across all the email clients we have tested.
The blue underlined link will display when there’s no styling set and therefore will revert to the default colour.
Example:
<a href=”https://mylink.com/field1=Accept”>ACCEPT</a>
Solution:
Add styling to your anchor tag (link) with your preferred colour and other styles.
href=” https://mylink.com/field1=Accept”>ACCEPT</a>
Result
Purple underlined link
Adding the above styling with the preferred colour to your link will resolve the purple links when clicked in most email clients and devices. But of course, we always have to deal with Outlook and its many quirks.
Example when clicked:
<a style=”color: #ffffff; text-decoration: none;” href=”https://mylink.com/field1=Accept”>ACCEPT</a>
Solution:
Wrap the link with a strong element inside your anchor tag. Strong in HTML means bold so your text will now display as bold.
If the text is not supposed to be bold, simply add styling inside your strong element to display as normal.
<a style=”color: #ffffff; text-decoration: none;” href=” https://mylink.com/field1=Accept “><strong style=”font-weight: normal;”>ACCEPT</strong></a>
Result:
Want more info like this?
If you found this helpful you can sign up to receive three helpful things about email marketing in your inbox every Thursday.
This will function effectively on Gmail, both the desktop and mobile app. Have you tested it on Outlook? Different email clients can sometimes have varying compatibility.
Hey Faheem, thanks for commenting.
What can we say….Outlook????
To answer your question we have tested in Outlook and to date this method works. We use it frequently to manage for link styling. As changes come about in Outlook, Gmail etc. we update accordingly.
Is there a method you use that you’d like to share here?