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

Senior Email Designer and Campaign Manager

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

2 Comments

  1. Faheem Sharif

    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.

    Reply
    • Melaina Gross

      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?

      Reply

Submit a Comment

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

Recommended reading

Accessibility in emailBest PracticeEmail Marketing
How does a blind person read their email? Seven conditions to consider when designing and creating email newsletters

How does a blind person read their email? Seven conditions to consider when designing and creating email newsletters

Accessibility means making sure everyone can receive and understand your email message regardless of any disabilities or assistive devices they may be using.