如何去除HTML邮件按钮内超链接的默认蓝色样式

可行解决方案（针对HTML邮件客户端兼容性适配） #

1. 先修复现有代码的基础语法错误 #

你当前的hover样式存在两处语法错误，会直接导致样式不生效：

• 颜色值拼写错误：rbg应为rgb
• 属性写法错误：opacity不能和颜色值写在同一属性行，!important要紧跟在属性值后面
  修正后的hover样式如下：

.button-td,
.button-a {
    transition: all 100ms ease-in;
    color: #ffffff !important;
}
.button-td:hover,
.button-a:hover {
    background: rgb(1,84,61) !important;
    opacity: 0.8 !important;
    border-color: rgb(1,84,61) !important;
}

2. 针对邮件客户端强制覆盖链接样式的兼容处理 #

绝大多数邮箱客户端（Outlook、Gmail、iOS自带邮箱等）会默认强制给链接加蓝色下划线样式，甚至忽略内联的!important，按以下步骤处理即可解决：

• 把空的<font color="#FFFFFF">标签移到链接文本外层，不要空置：把按钮文本改成<font color="#FFFFFF">^slink^</font>
• 在邮件头部的<style>标签里新增Outlook专属重置规则：

#outlook a {padding:0;}
a {
    text-decoration: none !important;
    color: inherit !important;
    mso-line-height-rule: exactly;
}

• 新增格式检测屏蔽meta标签，避免iOS系统自动识别链接并改色：

<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">

• 极端兼容方案：如果部分老旧客户端还是强制改色，可以在a标签的内联样式里加text-shadow: 0 0 0 #ffffff;，哪怕文字本身被改蓝，白色阴影也会覆盖原有颜色，视觉上保持白色。

3. 修正后的完整按钮代码参考 #

<!-- Button : Begin -->
</p>
<table cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:center;">
<tr>
<td style="border-radius: 3px; background: #01553d; text-align: center;" class="button-td">
<a style="background: #01553d; border: 15px solid #01553d; padding: 0 10px; color: #ffffff !important; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none !important; display: block; border-radius: 3px; font-weight: bold; text-shadow: 0 0 0 #ffffff;" href="^slink^" class="button-a"> 
<!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
<font color="#FFFFFF">^slink^</font>
<!--[if mso]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]--> 
</a>
</td>
</tr>
</table>
<!-- Button : END --></td>

内容的提问来源于stack exchange，提问作者Kristine Kjær