Cara Membuat Tombol Email Antipeluru Cantik Yang Benar-Benar Berfungsi

Diterbitkan: 2021-06-11

Jika halaman web Anda adalah toko Anda, dan email Anda adalah jendela toko Anda, maka tombol ajakan bertindak (CTA) Anda adalah tampilan jendela luar biasa yang membuat orang masuk. Atau sesuatu. Metafora saya mungkin telah berantakan di sana.

Tak perlu dikatakan, CTA Anda adalah salah satu bagian terpenting dari email Anda. Dan jika sulit ditemukan, sulit digunakan, atau rusak dengan cara apa pun, pelanggan Anda akan lari. (Melarikan diri!)

Jangan khawatir. Kami di sini untuk membantu memastikan tombol CTA Anda bukan kelinci yang haus darah yang membuat pelanggan Anda pergi. Dalam posting blog ini, kami akan menyelami sedikit lebih dalam tentang metode pembuatan tombol untuk memastikan mereka antipeluru bagi pelanggan Anda.

Bersiaplah untuk belajar:

Apa itu tombol anti peluru?
Praktik terbaik desain tombol
5 teknik pengkodean
- Tombol bantalan bersyarat
- tombol VML
- tombol bantalan
- tombol perbatasan
- Padding + tombol batas
Peningkatan lanjutan
Dukungan klien email

Apa itu tombol anti peluru?

Tombol antipeluru adalah tombol ajakan bertindak yang dibuat dengan kode, bukan gambar. Anda dapat dengan andal menukar GIF, PNG, dan JPEG Anda untuk HTML dan CSS. Dengan hanya menggunakan kode, tombol akan ditampilkan di semua klien email bahkan dengan gambar mati, sehingga menjadikannya “anti peluru.”

Terlebih lagi, Anda dapat memperbarui konten dan gaya tombol Anda hanya dengan mengedit template HTML Anda. Anda tidak perlu lagi membuang waktu untuk membuat tombol dalam alat desain seperti Photoshop, mengunggahnya ke server, dan memperbarui HTML Anda.

Jangan gunakan gambar

Saya akan mengatakan ini sekali dan kemudian tidak pernah mengatakannya lagi. Satu-satunya tombol yang benar-benar antipeluru adalah gambar.

*terkesiap*

Aku tahu. Tapi itu benar-benar satu-satunya cara Anda dapat menjamin tombol Anda terlihat persis sama di 100% klien email. Karena kita semua tahu betapa tidak konsistennya tampilan email kita di berbagai klien email, aplikasi, dan perangkat.

Meskipun demikian, Anda tidak boleh menggunakan tombol berbasis gambar. Tombol gambar hilang saat gambar dimatikan karena pemblokiran gambar, dan tidak dapat diakses oleh pelanggan Anda yang menggunakan pembaca layar (lebih lanjut tentang itu dalam satu detik).

tombol email gambar dengan gambar aktif vs. nonaktif — *Tombol gambar kehilangan dampak saat gambar dinonaktifkan*

Jika CTA Anda terkandung dalam gambar, ada kemungkinan besar bahwa pelanggan kehilangan pesan Anda. Lebih buruk lagi, mereka tidak berinteraksi dengan kampanye Anda.

Menggunakan tombol CTA berbasis gambar juga memengaruhi aksesibilitas email Anda. Jika Anda menyembunyikan konteks CTA di dalam gambar, pembaca layar mungkin tidak dapat membacanya, membuat email Anda tidak dapat diakses oleh pelanggan dengan gangguan penglihatan.

Sekarang setelah Anda mengetahui lebih banyak tentang tombol gambar, Anda harus menyadari bahwa pernyataan awal saya hanya sebagian besar benar. Tombol berbasis gambar terlihat sama di setiap klien email tempat gambar diaktifkan dan hanya jika pelanggan tidak menggunakan pembaca layar . Jadi apakah mereka benar-benar anti peluru? Tidak, mereka bukan. Dan karena kedua kasus yang disebutkan di atas tidak mungkin dilacak menggunakan pelacakan email standar, tidak ada cara bagi Anda untuk mengetahui berapa persentase pelanggan Anda yang mengalami pengalaman buruk ini.

Jadi buang CTA gambar dan pastikan pelanggan Anda dapat melihat dan menggunakan CTA Anda, apa pun perangkat yang mereka gunakan.

Pembuatan desain tombol yang indah

Tombol lebih dari sekadar kode. Ada beberapa faktor yang membuat tombol Anda dapat digunakan dan menarik perhatian.

Bentuk tombol

Jadikan tombol Anda terlihat seperti tombol.

Kita semua suka membuat tombol yang menyenangkan dan unik, tetapi sering kali jika Anda menyimpang terlalu jauh dari yang diharapkan, pelanggan akan kehilangan maksudnya—dan tidak mengambil tindakan. Ya, kata-kata mungkin mengatakan sesuatu dapat diklik, tetapi seperti yang mereka katakan, "Sebuah gambar bernilai seribu kata."

contoh bentuk tombol standar

Gunakan bentuk tombol standar untuk memastikan Anda menarik perhatian orang, terutama jika mereka sedang memindai. Bentuk standar meliputi:

Sudut membulat
Sudut persegi
berbentuk pil
tombol hantu
Tombol berbayang

Itu tidak berarti Anda tidak dapat melakukan hal-hal menyenangkan dengan tombol. Magic Spoon menambahkan beberapa GIF animasi yang menyenangkan ke tombol mereka untuk menarik lebih banyak perhatian kepada mereka.

contoh email sendok ajaib dari tombol dengan GIF animasi

Ukuran kancing

Dengan lebih dari 40% pelanggan membuka email di perangkat seluler, menurut data pangsa pasar klien email tahunan kami, tombol Anda harus dirancang agar berfungsi di semua perangkat.

Jika tombol Anda terlalu kecil, akan sulit untuk mengklik pada perangkat seluler. Jika terlalu besar, tampilannya kurang seperti tombol dan lebih seperti elemen desain.

Ada beberapa penelitian tentang ukuran tombol pada layar sentuh, tetapi penelitian tampaknya paling sering dilakukan dengan milimeter sebagai unit pengukuran utama. Yang kurang ideal. Tetapi beberapa telah membuat rasio milimeter-ke-piksel yang layak.

Ukuran ideal untuk tombol agar mudah diklik pada perangkat seluler telah diterjemahkan menjadi antara 42px dan 72px (sekitar 11-19mm). Ini sepertinya rata-rata untuk ketinggian tombol yang terlihat di seluruh web, dan tombol yang kami gunakan di sini di Litmus termasuk dalam kisaran itu juga.

Dalam satu penelitian yang mencapai 30mm, akurasi ketuk-untuk-klik mencapai 20mm, jadi ada titik di mana ukuran tombol tidak membuat banyak perbedaan lagi.

Ruang tombol

Pastikan ada cukup ruang kosong di sekitar tombol Anda juga, sehingga menonjol. Ini juga memudahkan pelanggan Anda untuk mengklik tombol yang benar.

Contoh terbaik dari ini adalah email dengan banyak tautan dalam satu paragraf. Jika Anda mengelompokkan tautan secara berdekatan, pelanggan Anda tidak akan pernah mengeklik secara akurat apa yang Anda ingin mereka klik, terutama di seluler.

Umpan balik visual

Tidak semua klien email mendukung elemen interaktif, tetapi jika memungkinkan, menambahkan sedikit interaktivitas untuk memberikan umpan balik visual membantu pelanggan mengetahui bahwa interaksi mereka telah terdaftar.

Ini adalah tanda tambahan bagi mereka bahwa ada sesuatu yang dapat diklik.

Ini bisa sesederhana perubahan warna atau serumit yang Anda inginkan. (Kami tahu kadang-kadang menyenangkan untuk keluar semua, jadi jangan menahan diri — tetapi tahu kapan harus mengendalikan diri.)

Tombol standar kami sendiri memiliki perubahan warna serta efek tombol tekan.

contoh email dari efek tombol tekan

Tapi kami juga mencoba sesuatu yang baru, dan bersenang-senang dengan tombol buletin Januari kami. Elemen desain hebat yang juga menyenangkan untuk "didorong".

contoh email lakmus dari umpan balik visual pada tombol

Teks tombol

Jaga agar salinan atau label CTA Anda yang sebenarnya dapat ditindaklanjuti dan langsung ke intinya. Beri tahu pelanggan apa yang Anda ingin mereka lakukan sejelas dan sesingkat mungkin.

1 sampai 5 kata biasanya cukup.

Panjang itu juga membuat email Anda dapat dipindai. Dan jika Anda memiliki lebih banyak untuk mengatakan? Sertakan dalam judul di atas tombol. Dengan secara teratur menjaga CTA dalam 1 hingga 5 kata, itu membuat momen langka yang Anda lakukan lebih menonjol dengan cara yang jauh lebih bermakna.

5 cara untuk membuat kode tombol antipeluru

Dengan lebih dari 300.000 kemungkinan rendering email, apakah benar-benar mengejutkan bahwa Anda tidak dapat membuat tombol satu ukuran untuk semua yang berfungsi di mana saja?

Yang dapat Anda lakukan adalah membuat tombol yang berfungsi hampir di semua tempat. Dan ada beberapa metode berbeda untuk membuat tombol ini tergantung pada kebutuhan Anda. Lihatlah ini untuk mencari tahu mana yang paling cocok untuk mendukung pelanggan Anda.

1. Tombol bantalan bersyarat

Terima kasih kepada Mark Robbins untuk tombol bantalan bersyarat ini. Itu yang kita gunakan di sini di Litmus.

tombol bersyarat

Tombol ini menggunakan penataan gaya pada tautan untuk menata gayanya bagi semua orang kecuali Outlook. Kemudian, ia menggunakan kode bersyarat untuk menambahkan padding khusus Outlook. Karena bantalan Outlook dikontrol secara terpisah, Anda dapat mengedit bantalan Outlook tanpa memengaruhi tampilan tombol di klien email lainnya.

<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>

kotak masuk email dengan wajah bahagia dan tanda centang

Apa itu bekerja?

Rusak bukanlah tampilan yang bagus. Uji tampilan tombol Anda di lebih dari 90 klien email, aplikasi, dan perangkat dengan Pratinjau Email Litmus. Dan pastikan Anda membuat email sesuai merek dan bebas kesalahan—setiap saat.

Pelajari lebih lanjut →

Pro dan kontra dari tombol bantalan bersyarat

Kelebihan:

Ada dukungan hebat di sebagian besar klien email (lihat tabel di bawah).
Seluruh tombol itu sendiri dapat diklik.

Kontra:

Ini membutuhkan bermain-main dengan kode bersyarat untuk mendapatkan padding yang tepat di Outlook.
Versi Outlook memiliki sudut kuadrat apa pun yang terjadi.

2. Tombol berbasis VML

Pendekatan tradisional untuk tombol antipeluru dipopulerkan oleh Stig, seorang pengembang di Campaign Monitor.

tombol vml

Pendekatan ini menggunakan gaya pada tautan itu sendiri untuk menyusun dan menata tombol untuk sebagian besar klien email. Struktur dipasok melalui properti garis-tinggi dan lebar.

Sebagai cadangan untuk Microsoft Outlook, Vector Markup Language (VML) digunakan dalam komentar bersyarat khusus Outlook. VML membuat kotak di sekitar tautan di Outlook, lalu menata tag jangkar untuk membuat desain tombol untuk semua orang.

<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>

Untuk versi tombol ini yang lebih kompleks, Anda sebenarnya akan membuat dua versi tombol—satu di VML dan satu lagi untuk orang lain.

Pro dan kontra dari tombol berbasis VML

Kelebihan:

Ada banyak dukungan di sebagian besar klien email (lihat tabel di bawah).
Seluruh tombol itu sendiri dapat diklik.
Sudut membulat dipertahankan di Outlook.

Kontra:

Itu bergantung pada penggunaan bahasa yang tidak dikenal—VML—yang dimiliki oleh suite Microsoft Office, yang membuat pembuatan tombol antipeluru baru dan memperbarui yang sudah ada memakan waktu dan membuat frustrasi.
Lebar dan tinggi tombol antipeluru harus dinyatakan, sehingga setiap perubahan pada salinan CTA akan memerlukan perubahan pada dimensi tombol.
Versi tombol VML yang lebih kompleks memerlukan dua URL yang perlu diubah. Dan beberapa ESP tidak melacak URL di bagian VML.
VML memerlukan tinggi dan lebar yang tetap, jadi tombol ini tidak berfungsi dengan baik untuk template yang panjang salinannya di CTA dapat bervariasi.

Jika Anda tidak ingin mempelajari seluk beluk VML (dan jujur, siapa yang mau?), Campaign Monitor memiliki alat online gratis untuk membuat tombol antipeluru tradisional. Buttons.cm memudahkan untuk membuat tombol CTA baru yang akan terlihat bagus dan berfungsi dengan baik di sebagian besar klien email.

Ini adalah gaya masuk saya untuk tombol pengkodean ketika saya mengerjakan email farmasi. Nilai tambah terbesarnya adalah kemampuannya untuk mempertahankan sudut-sudut bulat di Outlook, yang dibutuhkan untuk industri yang sangat diatur itu.

3. Tombol berbasis padding

tombol bantalan

Metode ini menggunakan tabel HTML sederhana untuk tombol. Itu bergantung pada padding di tingkat sel tabel untuk menyusun tombol serta atribut HTML dan CSS untuk menata tombol.

<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>

Pro dan kontra dari tombol berbasis padding

Kelebihan:

Ini bekerja dengan baik di sebagian besar klien email (lihat tabel di bawah).
Ini menggunakan kode email yang akrab dengan desainer—HTML dan CSS—yang membuat pembuatan tombol antipeluru baru dan memperbarui yang sudah ada menjadi mudah.

Kontra:

Seluruh tombol tidak dapat diklik, yang dapat menyebabkan gesekan dengan pelanggan yang merasa telah mengeklik atau mengetuk tombol.
Outlook tidak mendukung sudut membulat.

4. Tombol berbasis batas

tombol perbatasan

Tombol berbasis batas mengambil pendekatan yang mirip dengan metode sebelumnya. Dengan menggunakan HTML dan CSS sederhana, Anda dapat menyusun dan menata ajakan bertindak Anda. Namun, alih-alih mengandalkan padding pada tingkat sel tabel untuk struktur, tambahkan batas tebal ke tautan itu sendiri untuk membangun CTA Anda.

<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>

Perhatikan bahwa tag tautan disetel menjadi elemen tingkat blok dan batas tersebut digunakan untuk memberikan "padding" kami. Ini memastikan seluruh tombol dapat diarahkan dan diklik, bahkan di klien desktop yang lebih lama.

Pro dan kontra dari tombol berbasis perbatasan

Kelebihan:

Semua gaya ada di tag tautan yang sebenarnya, yang menyederhanakan kode.
Hanya satu tombol yang digunakan. Tidak diperlukan tombol ganda atau kode VML yang membingungkan.
Anda tidak memerlukan definisi tinggi atau lebar tertentu, membuat tombol sangat skalabel.

Kontra:

Outlook mengurangi ukuran perbatasan dengan jumlah kecil.
Outlook tidak mengenali tag <a> sebagai elemen tingkat blok.
Outlook tidak mendukung sudut membulat.
Tidak ada kemampuan untuk menambahkan gaya yang lebih canggih seperti batas ekstra pada elemen tautan yang tepat.

5. Tombol berbasis padding-and-border

Tombol berbasis padding-and-border menggabungkan elemen dari dua pendekatan sebelumnya.

tombol email padding dan border

Pada dasarnya, pendekatan ini menggunakan struktur penataan yang sama untuk tautan dengan padding dan setidaknya batas 1px yang solid. Kemudian, warna latar belakang diterapkan ke <td> untuk mengisi seluruh latar belakang tautan. Warna latar belakang perlu diterapkan ke <td> alih-alih <a> dalam contoh ini karena Outlook tidak mengenali padding horizontal pada tag <a> (karena tidak mendukung gaya seperti itu untuk HTML tingkat non-blok elemen).

<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>

Pro dan kontra dari tombol padding-and-border

Kelebihan:

Hanya satu tombol yang perlu dikodekan, yang membuat tombol yang menggunakan teknik ini mudah diperbarui.
Dimensi khusus untuk tombol tidak diperlukan.
Gambar latar belakang dapat didukung dengan metode ini.

Kontra:

Penataan gaya dipisahkan antara <td> dan <a>, sehingga keduanya perlu diperbarui bila ada perubahan gaya tombol.
Outlook tidak mendukung sudut membulat.

Bagaimana dengan HTML semantik?

Kami senang menggunakan html semantik, tetapi sayangnya, tag <button> tidak didukung di email. Ini direduksi menjadi <div> di sebagian besar klien email, yang tidak dapat diklik atau tidak ditampilkan dengan benar.

Div atau tabel bersarang di dalam tag jangkar Anda dapat dilakukan. Tapi itu tidak benar secara semantik. Selain itu, kedua metode ini menghasilkan tombol yang tidak berfungsi di Outlook. Dalam kasus tabel, tautannya tidak dapat diklik, dan dalam kasus div… yah, lihat sendiri:

tombol div	Tombol Div di Outlook

Peretasan dan peningkatan lanjutan

Semua metode di atas adalah titik awal yang bagus dalam membuat tombol antipeluru, tetapi setiap teknik dapat dimodifikasi lebih lanjut untuk membuat tombol antipeluru yang lebih baik.

Peretasan padding horizontal untuk Outlook

Outlook tidak mendukung padding horizontal, yang dapat mengakibatkan teks CTA Anda menjadi sangat dekat dengan tepi kiri dan kanan tombol antipeluru Anda.

Retasan cepat yang dapat digunakan untuk meningkatkan "padding" horizontal untuk Outlook adalah dengan menambahkan spasi sebaris dan tidak terputus di setiap sisi tautan. Tombol padding bersyarat sudah memanfaatkan ini bersama dengan properti letter-spacing untuk menambah ruang di sisi tombol.

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

Peningkatan progresif dengan kueri media

Untuk meningkatkan desain tombol antipeluru, Anda dapat menggunakan gaya tingkat lanjut seperti batas, gradien, font web, efek arahkan kursor, dan lainnya dengan kueri media.

tombol email standar vs. tombol yang ditingkatkan secara progresif

Penyempurnaan Outlook dengan VML

Jika Anda ingin membuat tombol Anda benar-benar bersinar, Anda dapat menyelami VML untuk menambahkan sedikit pizazz ke tombol Anda.

Meskipun VML bisa membuat frustrasi, VML memungkinkan Anda membuat beberapa tombol yang sangat menyenangkan dengan gambar latar belakang dan gradien serta bayangan. Pasti ada tingkat coba-coba, tetapi hasilnya bisa menakjubkan.

Lihat tombol kami dari buletin Januari kami sebagai contoh:

Contoh email dengan tombol VML yang menyenangkan — *Menggunakan VML untuk menambahkan bayangan tombol di Outlook agar sesuai dengan bayangan jatuh di klien email lainnya*

Jadi, seperti apa dukungan klien email?

Klien email telah memperbarui dukungan mereka sejak posting ini pertama kali ditulis pada tahun 2017, jadi tombol-tombol ini sangat dekat dengan antipeluru. Jumlah dukungan paling sedikit ada di Outlook, seperti yang diharapkan, tetapi bahkan di sana, tombolnya tidak terlalu rusak.

Anda dapat melihat tes lakmus lengkap di sini.

Klien Email	Bersyarat	VML	Lapisan	Berbatasan	Padding + Perbatasan
Apple Mail
Catatan Teratai	✘	✘
IBM Catatan 10	✘	✘
Outlook 2007-2016	*		*	*†	*
Outlook untuk Mac
Office365 (desktop)	*		*	*†	*
Gmail
AOL
Yahoo
Outlook 365 (email web)
Outlook.com
Mail.ru
GMX.de	*		*	*	*
T-Online.de	kan
web.de	*		*	*	*
Aplikasi Gmail (Android)
Aplikasi Gmail (iOS)
iPhone/iPad
Samsung Mail
Pandangan (Android)
Outlook (iOS)
Mode Gelap
Apple Mail
Aplikasi Gmail
iPhone/iPad
Kantor 365 (Desktop)		✘
Outlook.com

* Sudut membulat tidak merender. Ukuran tombol terdistorsi.

Dukungan dan peretasan Mode Gelap

Mode Gelap menghadirkan sentuhan menarik pada tombol antipeluru. Seperti kebanyakan HTML dan CSS, Anda dapat mengontrol gaya Mode Gelap untuk tombol dengan kueri media.

Namun, Gmail dan Outlook.com dapat membalikkan warna tombol.

Jika Anda ingin mempertahankan warna latar belakang pada tombol Anda, ada beberapa peretasan. Hati-hati untuk membalikkan warna salinan pada tombol. Tidak ada cara untuk mencegah warna font Anda beralih di Outlook, tetapi Anda dapat membuat teks putih pada tombol Anda tetap putih dengan solusi campuran CSS Remi Parmentier.

Kurangnya dukungan terbesar dalam opsi tombol antipeluru ini adalah tombol VML.

Dalam Mode Gelap, Office 365 akan membalikkan warna latar belakang Anda, tetapi tidak akan membalikkan warna isian di VML. Jadi Anda berakhir dengan tombol yang terlihat seperti ini:

Tombol VML dalam mode gelap

Ada perbaikan untuk ini: Pastikan untuk menggunakan nilai RGBA untuk warna latar belakang pada tag <a> untuk tombol Anda, seperti:

<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>

Jadi Anda berakhir dengan tombol yang terlihat seperti ini (jauh lebih baik, bukan?):

Tombol email VML dengan perbaikan Mode Gelap

Nilai RGBA sebagai warna latar belakang tidak didukung di Outlook, sehingga kembali ke warna VML. Terima kasih kepada Wilbert Heinen untuk perbaikan ini! Karena kami tidak dapat mengontrol warna font dalam Mode Gelap di Outlook, jika Anda akan menggunakan tombol ini, pastikan pilihan warna Anda memperhitungkan aksesibilitas saat warna font Anda juga dibalik. (Contoh yang kami gunakan adalah contoh bagus tentang warna apa yang tidak boleh digunakan.)

Apakah kampanye Anda antipeluru?

Terlepas dari pendekatan mana yang Anda ambil, menggunakan tombol antipeluru untuk ajakan bertindak jauh lebih unggul daripada mengandalkan gambar. Bahkan di klien email yang memblokir gambar, tombol antipeluru memastikan pesan Anda akan jelas bagi audiens Anda, meningkatkan kemungkinan pelanggan Anda terlibat. Tidak ada lagi email rusak!

Buat email sesuai merek dan bebas kesalahan dengan Litmus

Email yang rusak—terutama tombol CTA—berarti lebih sedikit klik dan konversi. Aduh. Litmus membantu Anda memastikan semuanya sempurna dengan pemeriksaan otomatis untuk pemblokiran gambar, tautan rusak, dan banyak lagi.

Mulai uji coba gratis Anda →

Apa teknik tombol antipeluru favorit Anda?

Beri tahu kami bagaimana Anda membuat tombol email antipeluru di komentar di bawah.

Awalnya diterbitkan pada 1 November 2017, oleh Jason Rodriguez. Terakhir diperbarui pada 22 Juni 2021.