任何电子邮件客户端的HTML电子邮件按钮样式

时间:2018-12-28 06:50:25

标签: html css html-email

我有以下代码来为html电子邮件建立按钮,我只想知道它将在所有电子邮件客户端中呈现而没有任何问题吗?

<table border="0" cellpadding="12" cellspacing="0" bgcolor="#00b5cc" style="border-radius:4px;">
    <tr>
        <td align="center">
            <a href="#" target="_blank" style="text-decoration:none;">
                <font color="#fff">Text here</font>
            </a>
        </td>
    </tr>
</table>

2 个答案:

答案 0 :(得分:1)

以下是 Email on Acid 网站中的压缩代码。我一直在使用它,并且它在所有电子邮件客户端中都呈现相同的效果。

注意事项:

  • 如果要删除倒圆的边缘,请同时删除两个边界半径(td和标签)。无论哪种方式,它将在Outlook上呈现为锐利边缘。
  • 如果您删除td和标签上的背景色,则应该会显示带有边框的CTA。这仍将在所有电子邮件客户端中呈现相同的效果

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius:5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Call to action</a> </td>
        </tr>
      </table>

希望这就是您想要的。

答案 1 :(得分:-2)