如何创建绝对有效的精美防弹电子邮件按钮

已发表: 2021-06-11

如果您的网页是您的商店，而您的电子邮件是您的商店橱窗，那么您的号召性用语 (CTA) 按钮就是让人们进入的令人惊叹的橱窗展示。或其他东西。我的比喻可能在那里分崩离析。

毋庸置疑，您的 CTA 是电子邮件中最重要的部分之一。如果很难找到、难以使用或以任何方式损坏，您的订阅者就会逃跑。（逃跑！）

不过不用担心。我们是来帮助确保您的 CTA 按钮不会把您的订阅者赶走的嗜血兔子。在这篇博文中，我们将更深入地探讨制作按钮的方法，以确保它们对您的订阅者来说是防弹的。

准备学习：

什么是防弹按钮？
按钮设计最佳实践
5种编码技术
- 条件填充按钮
- VML 按钮
- 填充按钮
- 边框按钮
- 填充 + 边框按钮
高级增强功能
电子邮件客户端支持

什么是防弹按钮？

防弹按钮是用代码而不是图像构建的号召性用语按钮。您可以可靠地将 GIF、PNG 和 JPEG 替换为 HTML 和 CSS。通过仅使用代码，即使关闭图像，该按钮也会显示在所有电子邮件客户端中，从而使它们成为“防弹”。

此外，您可以通过简单地编辑 HTML 模板来更新按钮的内容和样式。您不再需要浪费时间在 Photoshop 等设计工具中制作按钮、将它们上传到服务器以及更新您的 HTML。

不要使用图像

我要说一次，然后再也不说。唯一真正防弹的按钮是图像。

*喘气*

我知道。但这确实是确保您的按钮在 100% 的电子邮件客户端中看起来完全相同的唯一方法。因为我们都知道我们的电子邮件在不同的电子邮件客户端、应用程序和设备上看起来是多么不一致。

尽管如此，您永远不应该使用基于图像的按钮。由于图像阻塞而关闭图像时，图像按钮会丢失，并且使用屏幕阅读器的订阅者无法访问它们（稍后将详细介绍）。

如果您的号召性用语包含在图像中，则订阅者很可能会错过您的消息。更糟糕的是，他们没有与您的广告系列互动。

使用基于图像的 CTA 按钮也会影响电子邮件的可访问性。如果您将 CTA 的上下文隐藏在图像中，屏幕阅读器可能无法阅读它们，从而使视障订阅者无法访问您的电子邮件。

现在您对图像按钮有了更多的了解，您应该意识到我最初的陈述只是大部分是正确的。基于图像的按钮在打开图像的每个电子邮件客户端中看起来都相同，并且仅当订阅者未使用屏幕阅读器时。那么它们真的防弹吗？不，他们不是。由于无法使用标准电子邮件跟踪来跟踪上述两种情况，因此您无法知道有多少订阅者有这种糟糕的体验。

因此，放弃图片号召性用语并确保您的订阅者无论使用什么设备都可以看到和使用您的号召性用语。

一个漂亮的按钮设计的气质

按钮不仅仅是代码。有几个因素可以使您的按钮可用且引人注目。

按钮形状

让你的按钮看起来像按钮。

我们都喜欢制作有趣且独特的按钮，但通常如果您偏离预期太远，订阅者就会错过意图，而不会采取行动。是的，这些词可能会说某些东西是可点击的，但正如他们所说，“一张图片胜过一千个词。”

标准按钮形状示例

使用标准按钮形状以确保吸引人们的注意力，尤其是当他们正在扫描时。标准形状包括：

圆角
方角
丸状
幽灵按钮
阴影按钮

这并不是说你不能用按钮做有趣的事情。 Magic Spoon 在按钮上添加了一些有趣的动画 GIF，以吸引更多的注意力。

带有动画 GIF 的按钮的魔术勺电子邮件示例

按钮尺寸

根据我们的年度电子邮件客户端市场份额数据，超过 40% 的订阅者在移动设备上打开电子邮件，因此按钮的设计使其适用于所有设备非常重要。

如果您的按钮太小，将很难在移动设备上点击。如果它太大，它看起来不像一个按钮，而更像是一个设计元素。

已经有几项关于触摸屏按钮大小的研究，但研究似乎最常见的是以毫米为主要测量单位。这不太理想。但有些人已经取得了不错的毫米像素比。

用于在移动设备上轻松点击的按钮的理想尺寸已转换为 42 像素和 72 像素（约 11-19 毫米）之间。这似乎是在 Web 上看到的按钮高度的平均值，我们在 Litmus 使用的按钮也属于该范围。

在一项高达 30 毫米的研究中，点击精度达到 20 毫米，因此按钮大小不再有太大差异。

按钮空间

确保按钮周围也有足够的空白，以便它们脱颖而出。这也使您的订阅者更容易点击正确的按钮。

最好的例子是在一个段落中有很多链接的电子邮件。如果您将链接集中在一起，您的订阅者将永远无法准确点击您希望他们点击的内容，尤其是在移动设备上。

视觉反馈

并非每个电子邮件客户端都支持交互元素，但在可能的情况下，添加一些交互性以提供视觉反馈有助于订阅者知道他们的交互已注册。

这对他们来说是一个额外的迹象，表明某些东西是可点击的。

这可以像改变颜色一样简单，也可以像您想要的那样复杂。（我们知道有时全力以赴很有趣，所以不要退缩——但要知道什么时候控制自己。）

我们自己的标准按钮具有颜色变化和按钮效果。

按钮效果的电子邮件示例

但是我们也确实尝试了一些新的东西，并且我们的一月时事通讯按钮很有趣。一个很棒的设计元素，“推动”也很有趣。

一个按钮视觉反馈的石蕊电子邮件示例

按钮文字

保持您的实际 CTA 副本或标签可操作且切中要害。尽可能清晰简洁地告诉订阅者您希望他们做什么。

通常 1 到 5 个单词就足够了。

该长度还可以使您的电子邮件可扫描。如果你还有更多的话要说？将其包含在按钮上方的标题中。通过定期将 CTA 保持在 1 到 5 个单词内，它可以让您回顾的罕见时刻以更有意义的方式脱颖而出。

编写防弹按钮的 5 种方法

拥有超过 300,000 个潜在的电子邮件效果图，您不能制作一个适用于所有地方的通用按钮真的很令人惊讶吗？

您可以做的是制作一个几乎可以在任何地方使用的按钮。根据您的需要，有几种不同的方法可以创建这些按钮。看看这些，找出最适合支持订阅者的方法。

1. 条件填充按钮

感谢 Mark Robbins 提供了这个条件填充按钮。这是我们在 Litmus 使用的那个。

条件按钮

此按钮使用链接上的样式来为除 Outlook 之外的所有人设置样式。然后，它使用条件代码添加特定于 Outlook 的填充。由于 Outlook 填充是单独控制的，因此您可以编辑 Outlook 填充而不会影响按钮在其他电子邮件客户端中的外观。

<a href="https://www.litmus.com/" style="background-color: #1F7F4C; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; color: #ffffff; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">
	<!--[if mso]>
	<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
	<![endif]-->
	<span style="mso-text-raise: 15pt;">I am a button &rarr;</span>
	<!--[if mso]>
	<i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
	<![endif]-->
</a>

它起作用了吗？

破不好看。使用 Litmus 电子邮件预览测试您的按钮在 90 多个电子邮件客户端、应用程序和设备中的外观。并确保您每次都创建符合品牌的、无错误的电子邮件。

了解更多 →

条件填充按钮的优缺点

优点：

大多数电子邮件客户端都有很好的支持（见下表）。
整个按钮本身是可点击的。

缺点：

它需要使用条件代码才能在 Outlook 中完全正确地填充。
无论如何，Outlook 版本都有方角。

2. 基于 VML 的按钮

传统的防弹按钮方法由 Campaign Monitor 的开发人员 Stig 推广。

虚拟按钮

这种方法使用链接本身的样式来为大多数电子邮件客户端构建和样式化按钮。结构是通过 line-height 和 width 属性提供的。

作为 Microsoft Outlook 的后备，矢量标记语言 (VML) 用于 Outlook 特定的条件注释中。 VML 在 Outlook 中的链接周围创建一个框，然后设置锚标记的样式以为其他人创建按钮设计。

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:170px;" arcsize="10%" stroke="f" fillcolor="#1F7F4C">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://litmus.com" style="background-color:#1F7F4C;border-radius:5px;color:#ffffff;display:inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;">I am a button &rarr;</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>

对于此按钮的更复杂版本，您实际上会创建该按钮的两个版本 — 一个在 VML 中，另一个用于其他人。

基于 VML 的按钮的优缺点

优点：

大多数电子邮件客户端都有很好的支持（见下表）。
整个按钮本身是可点击的。
Outlook 中保留圆角。

缺点：

它依赖于 Microsoft Office 套件专有的陌生语言 VML 的使用，这使得创建新的防弹按钮和更新现有按钮既耗时又令人沮丧。
必须声明防弹按钮的宽度和高度，因此对 CTA 副本的任何更改都需要更改按钮的尺寸。
VML 按钮的更复杂版本需要两个需要更改的 URL。并且某些 ESP 不会跟踪 VML 部分中的 URL。
VML 需要固定的高度和宽度，因此此按钮不适用于 CTA 中副本长度可能不同的模板。

如果您不想了解 VML 的来龙去脉（老实说，谁知道呢？），Campaign Monitor 有一个免费的在线工具来构建传统的防弹按钮。 Buttons.cm 可以轻松制作新的 CTA 按钮，这些按钮在大多数电子邮件客户端上看起来都很棒并且运行良好。

当我处理药品电子邮件时，这是我编码按钮的首选风格。最大的优点是它能够在 Outlook 中保留圆角，这是高度监管的行业所需要的。

3. 基于填充的按钮

填充按钮

此方法为按钮使用一个简单的 HTML 表。它依赖于表格单元格级别的填充来构建按钮以及 HTML 属性和 CSS 来设置按钮的样式。

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="padding: 12px 18px 12px 18px; border-radius:5px; background-color: #1F7F4C;" align="center">
            <a href="http://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">I am a button &rarr;</a>
        </td>
    </tr>
</table>

基于填充的按钮的优缺点

优点：

它适用于大多数电子邮件客户端（见下表）。
它使用电子邮件设计人员熟悉的代码——HTML 和 CSS——这使得创建新的防弹按钮和更新现有按钮变得轻而易举。

缺点：

整个按钮不可点击，这可能会导致与认为他们点击或点击按钮的订阅者产生摩擦。
Outlook 不支持圆角。

4. 基于边框的按钮

边框按钮

基于边框的按钮采用与前一种方法类似的方法。使用简单的 HTML 和 CSS，您可以构建和设计您的号召性用语。但是，不要依赖表格单元格级别的填充来构建结构，而是为链接本身添加粗边框以构建您的 CTA。

<a href="http://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none; border-radius: 5px; background-color: #1F7F4C; border-top: 12px solid #1F7F4C; border-bottom: 12px solid #1F7F4C; border-right: 18px solid #1F7F4C; border-left: 18px solid #1F7F4C; display: inline-block;">I am a button &rarr;</a>

请注意，链接标签设置为块级元素，边框用于提供我们的“填充”。这确保了整个按钮是可悬停和可点击的，即使在较旧的桌面客户端中也是如此。

基于边框的按钮的优缺点

优点：

所有样式都在实际的链接标签上，这简化了代码。
只使用一个按钮。不需要双按钮或混乱的 VML 代码。
您不需要特定的高度或宽度定义，使按钮具有高度可扩展性。

缺点：

Outlook 会少量减少边框的大小。
Outlook 不会将 <a> 标记识别为块级元素。
Outlook 不支持圆角。
无法在确切的链接元素上添加更高级的样式，例如额外的边框。

5. 基于填充和边框的按钮

基于填充和边框的按钮结合了前两种方法的元素。

填充和边框电子邮件按钮

本质上，这种方法使用相同的结构来为链接设置样式，同时使用填充和至少 1 像素的实心边框。然后，将背景颜色应用于 <td> 以填充链接的整个背景。在这种情况下，需要将背景颜色应用于 <td> 而不是 <a>，因为 Outlook 无法识别 <a> 标记上的水平填充（因为它不支持非块级 HTML 的这种样式）元素）。

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" style="border-radius: 5px; background-color: #1F7F4C;">
            <a href="https://litmus.com" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; font-weight: bold; text-decoration: none;border-radius: 5px; padding: 12px 18px; border: 1px solid #1F7F4C; display: inline-block;">I am a button &rarr;</a>
        </td>
    </tr>
</table>

填充和边框按钮的优缺点

优点：

只需要对一个按钮进行编码，这使得使用这种技术的按钮易于更新。
按钮的特定尺寸不是必需的。
这种方法可以支持背景图像。

缺点：

样式在 <td> 和 <a> 之间是分开的，所以当按钮的样式发生变化时，两者都需要更新。
Outlook 不支持圆角。

语义 HTML 怎么样？

我们喜欢使用语义 html，但不幸的是，电子邮件中不支持 <button> 标签。在大多数电子邮件客户端中，它被简化为 <div>，它要么不可点击，要么无法正确呈现。

可以在锚标记中嵌套 div 或表格。但这在语义上并不正确。此外，这两种方法都会导致按钮在 Outlook 中不起作用。在表格的情况下，链接不可点击，而在 div 的情况下......好吧，你自己看看：

div 按钮	Outlook 中的 Div 按钮

高级技巧和增强功能

上述所有方法都是创建防弹按钮的良好起点，但可以进一步修改每种技术以创建更好的防弹按钮。

Outlook 的水平填充技巧

Outlook 不支持水平填充，这会导致 CTA 文本非常靠近防弹按钮的左右边缘。

可用于增加 Outlook 的水平“填充”的一个快速技巧是有条件地在链接的每一侧添加内联、不间断空格。条件填充按钮已经利用它和 letter-spacing 属性在按钮的两侧添加空间。

<!--[if mso]>&nbsp;<![endif]-->

媒体查询的渐进增强

要改进防弹按钮的设计，您可以使用高级样式，如边框、渐变、Web 字体、悬停效果等，以及媒体查询。

标准电子邮件按钮与渐进增强按钮

使用 VML 增强 Outlook

如果您想让您的按钮真正发光，您可以深入到 VML 中为您的按钮添加一点活力。

与 VML 一样令人沮丧的是，它允许您创建一些非常有趣的按钮，其中包含背景图像和渐变以及阴影。肯定有一定程度的反复试验，但结果可能是惊人的。

查看我们一月份时事通讯中的按钮示例：

带有有趣的 VML 按钮的电子邮件示例 — *使用 VML 在 Outlook 中添加按钮阴影以匹配其他电子邮件客户端中的阴影*

那么，什么是电子邮件客户端支持呢？

自这篇文章于 2017 年首次撰写以来，电子邮件客户端已经更新了他们的支持，因此这些按钮非常接近防弹。正如预期的那样，Outlook 中的支持最少，但即使在那里，按钮也不是很坏。

您可以在此处查看完整的 Litmus 测试。

电子邮件客户端	有条件的	虚拟机	填充	边界	填充 + 边框
苹果邮箱
莲花便笺	✘	✘
IBM 笔记 10	✘	✘
展望 2007-2016	*		*	*†	*
Mac 版 Outlook
Office365（桌面）	*		*	*†	*
Gmail
美国在线
雅虎
Outlook 365（网络邮件）
展望网
邮件.ru
GMX.de	*		*	*	*
T-Online.de	†
网页版	*		*	*	*
Gmail 应用程序（安卓）
Gmail 应用程序 (iOS)
iPhone/iPad
三星邮箱
展望 (Android)
展望 (iOS)
黑暗模式
苹果邮箱
Gmail 应用程序
iPhone/iPad
办公室 365 （桌面）		✘
展望网

* 圆角不呈现。 † 按钮大小失真。

暗模式支持和黑客

暗模式为防弹按钮带来了有趣的变化。与大多数 HTML 和 CSS 一样，您可以使用媒体查询控制按钮的暗模式样式。

但是，Gmail 和 Outlook.com 可以反转按钮颜色。

如果您想保留按钮上的背景颜色，有一些技巧。但是，请注意反转按钮上副本的颜色。无法阻止您的字体颜色在 Outlook 中切换，但您可以使用 Remi Parmentier 的 CSS 混合解决方法将按钮上的白色文本保持为白色。

这些防弹按钮选项中最缺乏支持的是 VML 按钮。

在深色模式下，Office 365 将反转您的背景颜色，但不会反转 VML 中的填充颜色。所以你最终会得到看起来像这样的按钮：

暗模式下的 VML 按钮

对此有一个解决方法：确保为按钮的 <a> 标签上的背景颜色使用 RGBA 值，如下所示：

<div>
    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:170px;" arcsize="10%" stroke="f" fillcolor="#1F7F4C">
        <w:anchorlock/>
        <center>
    <![endif]-->
    <a href="http://litmus.com" style="background-color:rgba(31, 127, 76,1);border-radius:5px;color:#ffffff;display:inline-block;font-size: 18px; font-family: Helvetica, Arial, sans-serif;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:170px;-webkit-text-size-adjust:none;">I am a button &rarr;</a>
    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->
</div>

所以你最终会得到一个看起来像这样的按钮（好多了，对吧？）：

带有暗模式修复的 VML 电子邮件按钮

Outlook 不支持 RGBA 值作为背景颜色，因此它回退到 VML 颜色。感谢 Wilbert Heinen 的修复！由于我们无法在 Outlook 的深色模式下控制字体颜色，如果您要使用此按钮，请确保您的颜色选择也考虑到字体颜色反转时的可访问性。（我们使用的示例是不使用哪些颜色的一个很好的示例。）

您的广告系列防弹吗？

无论您采用哪种方法，使用防弹按钮进行号召性用语都远优于依赖图像。即使在阻止图像的电子邮件客户端中，防弹按钮也能确保您的信息对您的受众清晰，从而增加订阅者参与的可能性。不再有损坏的电子邮件！

使用 Litmus 创建品牌上无错误的电子邮件

损坏的电子邮件——尤其是 CTA 按钮——意味着更少的点击和转化。哎哟。 Litmus 通过自动检查图像阻塞、断开的链接等，帮助您确保一切都完美无缺。

开始免费试用 →

你最喜欢的防弹按钮技术是什么？

在下面的评论中告诉我们您如何创建防弹电子邮件按钮。

最初由 Jason Rodriguez 于 2017 年 11 月 1 日发表。 最后更新于 2021 年 6 月 22 日。