The Complete Guide to Building Reliable Buttons in Email Newsletters

Buttons are an essential part of successful email newsletters. Ultimately, they're the key elements for engaging recipients and prompting them to act. But to make sure they always work properly and display correctly, you need to build buttons that work no matter what, even when email clients block images.

This guide will walk you through the basics of building bulletproof buttons (bulletproof buttons), which always work whether or not images are enabled. We'll cover different ways to build them, best practices, and how to make sure they display correctly across various email clients.

What is a bulletproof button?

A bulletproof button is a button built with plain HTML and CSS instead of images. That means it will work in most email clients even when images are disabled or blocked. Bulletproof buttons are reliable because they don't depend on external images that might fail to load, and they remain accessible to all users, including those using screen readers.

With HTML and CSS, you can create a button with text, a background, dimensions, and even hover effects that look the same across different email clients.

Why shouldn't you use image-based buttons?

While using images for buttons might seem like a good idea from a design standpoint, in practice it can cause display problems. Here are a few reasons why image-based buttons aren't the best choice:

Image blocking: Most email clients, like Gmail and Outlook, block images by default. If a button image fails to load, the recipient won't see the button at all, and the whole call to action loses its effectiveness.
Reduced accessibility: Images are hard to adapt for users relying on screen readers, meaning image-based buttons can be inaccessible to people with visual impairments.
Lack of flexibility: If you need to change the button's text or color, you have to recreate and re-upload the image. That's inconvenient and creates extra work.

Bulletproof buttons, on the other hand, solve all of these problems. They're always visible even when images are disabled, they're accessible to screen readers, and they can be updated without having to upload new files.

Best practices for button design

Here are a few best practices for building effective, good-looking bulletproof buttons:

Button size: The button should be big enough to tap comfortably, especially on mobile devices. It's recommended to use a button of at least 44px x 44px for the best clickability.
Contrast and color: Choose bright colors that contrast with the background so the button stands out. Make sure it's distinguishable from the rest of the email's content.
Button text: The text on the button should be clear and unambiguous. Use short phrases like "Buy now," "Learn more," or "Get started."
Padding and spacing: Leave enough space around the button so it doesn't blend in with other elements in the email. This also improves readability and reduces the chance of accidental taps.
Responsiveness: Make sure the button looks good on both desktop and mobile. Using media queries will help make the button responsive.

Techniques for coding bulletproof buttons

There are several techniques for building bulletproof buttons that work across different email clients:

1. Using CSS with padding

The simplest way to build a bulletproof button is to use HTML and CSS. You set up the button using the <a> tag (a link), then add padding with CSS. This guarantees the button will work even when images are disabled.

Example:

2. Using VML for Outlook

For Outlook (especially older versions), you'll need to use VML (Vector Markup Language) — a markup language supported only by this email client. In this case, the button is drawn directly in the email rather than using an image.

Example:

<!—[if mso]>

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com" style="width:200px; height:50px; padding: 10px;" arcsize="10%" fillcolor="#4CAF50">

<w:anchorlock/>

</v:roundrect>

<![endif]—>

3. A button using border

You can create a button with a transparent background and a colored border, which also looks great in email clients.

Example:

4. The combined method (padding + border)

This method combines padding (inner spacing) with a border, letting you create more elaborate and eye-catching buttons.

Example:

Email client support and dark mode adaptation

Every email client handles a newsletter a bit differently. It's important to test your buttons in clients like:

Gmail (including the mobile app)
Outlook
Apple Mail
Yahoo Mail
Yahoo Mobile

Also, given how popular dark mode is, it's important to make sure buttons look good against a dark background too. For example, button colors need to be adapted for dark mode so the button stays readable.

How to build bulletproof buttons with Letteros.com

Building buttons like this by hand requires some technical knowledge, but with the Letteros.com email builder it gets a lot easier. Our editor lets you create bulletproof buttons without writing any code, guaranteeing they work correctly across every email client.

Just pick the "Button" element, set the text, color, and size, and the editor will automatically generate code that displays correctly under any conditions.

Conclusion

Bulletproof buttons aren't just a trend in email marketing — they're a necessity for making sure your newsletters work correctly across different email clients. They don't depend on images, they ensure accessibility and cross-client compatibility, and they boost conversions.

By using best practices like the coding methods described above, along with tools like the Letteros.com email builder, you can be sure your buttons will work effectively and look great across every device and email client.

Source:https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design