Outlook 2010 HTML电子邮件中链接的背景颜色

时间:2013-08-16 22:45:10

标签: html css html-email outlook-2010

此链接中的背景颜色(红色)仅应用于文本,而不是整个链接。

链接也有填充。

这适用于Outlook 2010。

有没有人知道如何让背景颜色填充链接?

这是一张图片:

Outlook 2010 on Windows

<a href="#" class="btn" style="font-size: 13px; border: 1px solid #c5c4c4; color: #3c3c3c; padding: 7px 25px; display: inline-block; border-radius: 5px; font-weight: bold; text-decoration: none; background-color: red; background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);">
  Accept
</a>

以下是可读格式的css:

font-size: 13px;
border: 1px solid #c5c4c4;
color: #3c3c3c;
padding: 7px 25px;
display: inline-block;
border-radius: 5px;
font-weight: bold;
text-decoration: none;
background-color: red;
background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);

1 个答案:

答案 0 :(得分:5)

我最终将锚点放在自己的表格中并设置td样式以获得背景和填充。

<table class="btn-table">
    <tr>
        <td style="font-family: arial,helvetica,sans-serif; font-size: 13px; border: 1px solid #c5c4c4; padding: 7px 25px; border-radius: 5px; font-weight: bold; background: #e3e2e2; background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);"><a href="#" class="btn" style="display: block; color: #3c3c3c; text-decoration: none;">Accept</a></td>
    </tr>
</table>