如何創建絕對有效的精美防彈電子郵件按鈕

已發表: 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 日。