Gmail stripping link color from emails?

Everything renders fine apart from link colors.. These are my links.

<a href="http://www.facebook.com.." style="color:#000000;text-decoration:none;font-weight:bold">Facebook</a>

<a href="http://www.twitter.com/..." style="color:#000000;">Twitter</a>

However, in gmail. These links are converted to this.

<a href="http://www.facebook.com.." style="text-decoration:none;font-weight:bold">Facebook</a>

<a href="http://www.twitter.com/..." style="">Twitter</a>

OK, so maybe gmail does this for all emails? I look around. Lots of blue links. I then open up a youtube message.

<a target="_blank" style="color:#e12e31;font-family:arial,verdana,sans-serif;text-transform:uppercase;text-decoration:none" href="...">Play all »</a>

Curious.. very curious. YouTube isn't having this problem that I am having. Can anyone else modify link colors in gmail when sending html emails? How are you doing it?

Answers


I had a similar problem with links in Gmail, but only when color: #000000; it changed it to the default blue.

I changed the color to a very dark grey and it worked.


GMail will change your links from black (#000000) to the default blue, presumably as an anti-spamming feature.

To get around this, just change the color of the font to (#000001), e.g.

<a href="#" style="color: #000001;">Click HERE</a>

Combining the answers here worked like a charm for me, eg:

color: #000001 !important;

I hope we aren't helping spammers and such here...


What I did for my email signature, is put the phone number with a middle dot instead of a dash, like this 226·860·XXXX, no more blue hyperlink! hope this helps someone


I'm able to set color links just adding the following style in email head:

<style>
      a, a:visited, .ii a[href] { color:#E5322C!important; text-decoration:none;}
      a:hover, .ii a[href]:hover{ text-decoration:underline;}
</style>

the only caveat is that the "a" selector is not enough, because Gmail adds a rule to .ii a[href], but adding rules for that selector fixes my links color issue. It works even on URLS, emails and telephone numbers that are converted into links by Gmail. There's no need to add inline styling.


Unfortunately it appears all the Answers here are for older Gmail, prior to the 2016/2017 update. None of the Answers provided prior to 2016 here work.

In modern Gmail Web and Gmail for Android, you need to trick Gmail into thinking you're trying to style a link-button, by setting a background color:

a.btn {
  color: #fff;
  background: #ffa100;
  text-decoration: none;
  text-transform: uppercase;
  padding: 5px 12px 6px 12px;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0,0,0,.18);
}

For the curious, it becomes this style, injected as the last style tag in the head of the overall Gmail Web page:

.msg-6177286137221397679 a.m_-6177286137221397679btn{
    color:#fff;
    background:#ffa100;
    text-decoration:none;
    text-transform:uppercase;
    padding:5px 12px 6px 12px;
    border-radius:5px
}

It's all on one minified line with the rest of the styles in actual Gmail; I've gently pretty-printed it here for comparison. You can see my box-shadow was thrown out, yet that didn't kill the entire style rule. You can also see a couple other important things that everyone says you can't do in Gmail, that turn out to no longer be true:

  • Padding is working
  • Tag-level style is working - that is, it's a.btn, whereas most Gmail advice tells you to never use tag styles, and only apply class-level styles

While a link-button like above is what Gmail is probably hoping for, you can trick it with, for example:

body {
    background: #ededed;
}
table.main a {
    color: #1c95cd;
    background: #ededed;
}

And that's enough, your link color style survives because Gmail naively considers this a link button.


You have to make sure that the you are inserting the code in the appropriate spot in your HTML, prior to the text you want to link up (obviously) and that the style="color:#ffffff;" element is properly nested within the tag.

And of course don't forget to include your </a> tag on the backside of the text link. This works fine for me when viewing in Gmail.

<a target="_blank" style="color:#ffffff;"  href="http://yoursite.com">Custom Color Link in Gmail</a>

Need Your Help

unix - count of columns in file

linux bash shell unix scripting

Given a file with data like this (i.e. stores.dat file)

How to check for an active Internet connection on iOS or macOS?

ios macos cocoa cocoa-touch reachability

I would like to check to see if I have an Internet connection on iOS using the Cocoa Touch libraries or on macOS using the Cocoa libraries.