CODEWITHSUNDEEP
htmlgmailanchor
ComputerUser
ComputerUser

Reputation: 4888

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?

Upvotes: 18

Views: 29856

Answers (8)

Dmitry Sikorsky
Dmitry Sikorsky

Reputation: 1501

What worked for me in both web/Android Gmail:

<style>
  .button {
    border-radius: 0.2rem;
    background: #4888e8;
    color: #fefefe;
    font-weight: bold;
    display: inline-block;
    padding: 0.75rem 1rem;
  }
</style>

<p>
  <a class="button" href="https://some-url" style="color: #fefefe;">Join</a>
</p>

Without inline style for color link buttons will have default blue one in Gmail for web (but correct color in Gmail for Android).

Upvotes: 1

Chris Moschini
Chris Moschini

Reputation: 37967

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.

Upvotes: 2

bluantinoo
bluantinoo

Reputation: 1839

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.

Upvotes: 2

laura
laura

Reputation: 31

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

Upvotes: 3

OZZIE
OZZIE

Reputation: 7348

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

color: #000001 !important;

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

Upvotes: 9

crmpicco
crmpicco

Reputation: 17181

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>

Upvotes: 13

Ryan
Ryan

Reputation: 1

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>

Upvotes: -3

Vasco
Vasco

Reputation: 259

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.

Upvotes: 24

Related Questions