How to get rid of those pesky purple and blue links in email

Apr 4, 2023 | Code snippets, Email Marketing, Email production

One of the pet peeves with the team here at Cantaloupe Digital is discoloured links. Here's how to set the colour and style of the hyperlinks in your html email newsletter. Especially useful when the default blue link style is messing with your design.

Thys Feldtmann

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>

setting alt text in your drag and drop email editor in MailChimp

Solution:

Add styling to your anchor tag (link) with your preferred colour and other styles.

<a style=”color: #ffffff; text-decoration: none;”
href=” https://mylink.com/field1=Accept”>ACCEPT</a>

Result

setting alt text in your drag and drop email editor in MailChimp

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>

setting alt text in your drag and drop email editor in MailChimp

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.

<a style=”color: #ffffff; text-decoration: none;” href=” https://mylink.com/field1=Accept”><strong>ACCEPT<strong></a>
setting alt text in your drag and drop email editor in MailChimp

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:

setting alt text in your drag and drop email editor in MailChimp

Have your say

Tell us about your pet peeve in the comments below.

We may just have the solution to share in the next edition of our weekly newsletter, Three Things Thursday: the email newsletter about email marketing. If you’ve not signed up to receive three helpful things about email marketing in your inbox every Thursday you go ahead and do that now

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recommended reading

Email Marketing advice for Financial Advisors

We have been asked if email marketing really works and if there are any guarantees.  There are two answers to this question: yes (definitely!) and no (if you use it incorrectly).  It depends on your objectives and how you use email marketing.  For this reason we can tell you there isn’t a guarantee as such. 

Email marketing for financial services

Webinar: Digital Accessibility

About 15% of your clients face barriers to accessing digital information. This is not including those who have limited data and access to smart technology.

The Cantaloupe Story

Read about us and meet our team

Join our team. Work from anywhere

Help us make email marketing better

Helping marketing teams and agencies since 2006

Overview of email marketing. Learn more

Email templates

Tried and tested 
PSD to HTML
Custom designs

Managed service

Data work
Production
Campaign Management

Automation

Automate marketing processes & tasks
Lead nurturing

Email Masterclass

For marketers and communications specialists