A Comprehensive Guide to Designing an Email Button

In email design, a frequently overlooked part is the email button — a clickable element within the email, prompting a specific action when clicked. Humble as is, it deserves a lot more attention as it could play a key role in your email marketing conversion rates.
Creating an effective button involves more than styling a rectangular shape with text; it helps ensure compatibility across diverse email clients and maintain email accessibility for all users. Proper button design and implementation require careful consideration of both technical and visual aspects.
Below, we’ll explore the fundamentals of email buttons. First, we will dive into the critical role of semantic HTML in accessibility and examine key design factors influencing click-through rates. We will then share practical examples demonstrating best practices.
Read on to learn more about these interactive elements serving as vital bridges between your message and conversions — here’s our exhaustive guide on email buttons.
What is an Email Button?
An email button is a clickable, visually designed element embedded within an email, typically used in marketing campaigns. It is often styled as a rectangular or rounded digital button with a clear call-to-action (CTA) written on it.
It encourages recipients to perform a specific action, such as:
- Visit a website,
- Make a purchase,
- Download content.
Email buttons are essential for improving user experience and driving conversions in email marketing.
The Benefits of Email Buttons
Paying attention to how your buttons look is critical. They offer tangible advantages directly impacting your email marketing success.
Email buttons directly influence your email marketing goals as they:
- Improve click-through rates (CTR): Buttons are visually appealing and easy to spot, encouraging recipients to click on the CTA. This often results in higher CTRs compared to text links.
- Enhance user experience: Buttons simplify navigation, making action-taking easy. They eliminate the need to scroll or search for links.
- Draw attention to the CTA: A well-designed button stands out in the email content, guiding the recipient’s focus toward the intended action.
- Support mobile-friendly design: Buttons are easier to tap on mobile devices compared to text links, improving accessibility and usability for recipients viewing emails on smartphones or tablets.
- Encourage action: Buttons with clear and action-oriented text (“Shop Now,” “Get Started”) encourage recipients to take precise actions, aligning with your marketing objectives.
- Increase conversion rates: By making it easier for users to interact and engage, buttons help drive conversions.
- Look professional: Buttons give marketing emails a polished and professional look.
- Are useful for A/B testing: You can test different button designs, colors, and text to determine which combinations perform best.
- Help with branding: Buttons can be styled to match your brand’s colors and design language, creating a cohesive and visually appealing email.
- Assist with engagement tracking: Button clicks are easier to track than generic email interactions.
While they have their benefits, they’re also necessary. The section below explains why.
The Need for a Bulletproof Email Button
Bulletproof email buttons are buttons in email marketing built entirely using HTML and CSS, rather than relying on images. They are designed to ensure the button renders correctly and remains functional regardless of the recipient’s email client, device, or settings.
Traditional image-based buttons often fail to load when email clients block images by default. Bulletproof buttons solve this issue by ensuring the CTA remains visible and clickable even when images are disabled.
Let’s review the 6 reasons why you should consider integrating bulletproof email buttons in your marketing emails ASAP.
1. Email Client Limitations
Clients such as Outlook or Thunderbird block images by default as part of their privacy or security measures. This means an image-based button could appear as a blank box, rendering the CTA invisible.
2. Improved Accessibility
Bulletproof buttons help you nail email accessibility. Not all recipients adjust their settings to display images, leading to missed opportunities if CTAs are image-based. A bulletproof button, built with HTML and CSS, is text-based and always visible.
3. Consistency Across Devices
Email campaigns must cater to a variety of devices and email clients, each with unique rendering quirks. Bulletproof buttons ensure the CTA looks and functions consistently across platforms.
4. Faster Load Times
Image-based buttons can slow down email loading times, especially on slower connections. Bulletproof buttons load instantly as they don’t rely on external assets like images.
5. Mobile Friendliness
Bulletproof buttons are designed to be responsive, resizing appropriately for smaller screens. As many users access their emails on mobile devices, they support mobile email marketing by ensuring usability.
6. Email Branding
While image-based buttons often fail to load, bulletproof buttons can improve your email branding. As you can be creative with brand colors, fonts, and effects using CSS, it ensures your branding remains intact.
By implementing bulletproof buttons, you can ensure your marketing emails achieve their objectives, regardless of technical limitations.
Types of Bulletproof Email Buttons
Different coding techniques are used to create bulletproof email buttons, each designed to address specific compatibility challenges in various email clients.
The four main types are shared below.
VML Buttons

VML (Vector Markup Language) buttons are specifically designed for compatibility with Microsoft Outlook, which relies on Microsoft Word’s rendering engine and has limited support for HTML and CSS.
These buttons use VML shapes to create clickable areas, ensuring they display correctly in Outlook. They were commonplace when Outlook used MS Word’s engine for email rendering, from 2007 to 2016. Marketers can create background colors and borders with VML, but HTML coding may be required for fallback support in other email clients.
Pros | Cons |
---|---|
They provide consistency in Outlook. | They’re complex to implement. |
VML coding includes fallback styles for other clients. | VML is not necessary for clients with good CSS support |
Padded Buttons
Padded buttons use a combination of the “table” element and padding within inline CSS to create a button-like appearance. The padding adds space around the text, making the button clickable and visually prominent.
It’s built using HTML tables for email client compatibility. Padding defines the button’s size and ensures touch-friendliness on mobile devices.
Pros | Cons |
---|---|
Padded buttons are simple to implement. | Users get limited styling options compared to more complex methods. |
They work well across most modern email clients. |
Border-Based Buttons
Border-based buttons rely on the “border” property in inline CSS to create the button’s shape and style. Instead of using background colors or padding, the borders form the button outline.
Pros | Cons |
---|---|
The code is lightweight. | These buttons are not as visually bold as padded buttons. |
Border-based buttons are ideal for minimalist button designs | There is limited adaptability for complex designs. |
Combined Padded/Border Buttons
These buttons combine padding for size and touch-friendliness with a border for additional styling. They often include background colors and hover effects for an enhanced visual appeal.
These buttons are created by combining padding and border properties in a “table” structure. This method offers more design flexibility, with borders and padding working together to define the button’s style.
Pros | Cons |
---|---|
The buttons are highly customizable | The process is slightly more complex than padded or border-based buttons alone. |
This method works consistently across most email clients | |
Combining padded and border buttons allows for both bold and minimalistic designs |
How to Create an Email Button Using HTML and CSS
Creating a button using HTML and CSS is simple and ensures it remains “bulletproof,” functioning even when images are disabled.
Here’s a step-by-step guide to crafting a responsive, visually appealing button:
- Start with an anchor tag: The button is essentially a styled hyperlink. Wrap the button’s text in an anchor tag (<a>) linking out to your desired URL.
- Apply inline CSS: Email clients often strip external stylesheets, so style the button using inline CSS for compatibility. Use attributes like “background-color,” color, padding, and “border-radius” for visual appeal.
- Add text content: Use clear, action-oriented text like “Shop Now” or “Get Started” to encourage clicks.
- Test for mobile responsiveness: Ensure the button scales well on mobile devices by testing on multiple email clients and devices.
Sample Code
Here’s a snippet of code you can include in your email:
<table cellspacing=”0″ cellpadding=”0″ border=”0″ align=”center”>
<tr>
<td align=”center” bgcolor=”#4CAF50″ style=”border-radius: 5px;”>
<a href=”https://example.com” target=”_blank”
style=”display: inline-block; font-family: Arial, sans-serif; font-size: 16px; color: #ffffff;
text-decoration: none; padding: 12px 24px; background-color: #4CAF50; border-radius: 5px;”>
Click Here
</a>
</td>
</tr>
</table>
This is what the end result will look like:

Elements in Email Button Code

You can fine-tune your buttons by adjusting the HTML parameters below:
Element | What does it do? |
---|---|
<table> | It provides a structure ensuring compatibility across email clients. |
cellspacing & cellpadding | Adjusting these removes space between cells, ensuring the button’s design is tight and uniform. |
border=”0″ | This code ensures no borders are added to the table by default. |
align=”center” | Align the button in the center within the email layout using this code |
bgcolor=”#4CAF50″ | This sets the background color of the button. Inline bgcolor ensures compatibility. |
style=”border-radius: 5px;” | Using “border-radius” gives the button rounded corners for a modern look. |
<a> | This is the hyperlink users click to take the desired action. |
target=”_blank” | Adding this opens the link in a new tab or window when clicked. |
style=”…;” | You can add inline styles to the anchor tag for colors, fonts, spacing, and overall appearance. |
text-decoration: none | Including this in your code removes the underline from the hyperlink for cleaner design. |
padding: 12px 24px; | This code adds space around the text inside the button, making it larger and more clickable. |
color: #ffffff; | This is an example of setting the text color to white for good contrast against the background. |
Design Guidelines for a Bulletproof Email Button
Creating a visually appealing and functional bulletproof email button requires careful attention to design elements. Doing so can help you enhance usability and align with your brand identity. Below are key aspects to consider when designing a bulletproof button.
1. Shape
Rectangular buttons are standard and easy to create; rounded corners (using border-radius) add a modern, softer look and feel.
Match the button shape to your brand style. For example, tech brands might prefer sharp edges, while lifestyle brands often favor rounded buttons. Avoid overly unconventional shapes that could affect usability.
2. Size
The button should be large enough to attract attention but not overpower the email design. Aim for a button width of 40 to 80% of the content area to ensure proportionality. Ensure the button size meets mobile-friendly standards, making it easy to tap with a thumb — say, a width of 44px.
3. White Space
White space around the button ensures it stands out from the surrounding elements and doesn’t look cluttered. Leave sufficient margin around the button for visual clarity. Avoid cramming buttons between text, images, or other elements.
4. Padding
Padding refers to the space inside the button, around the text. It affects both size and clickability. Use 12-20px for vertical padding and 20-30px for horizontal padding to make the button look balanced. Ensure enough padding for easy clicking, especially on mobile devices.
5. Text
Use concise, action-oriented text such as “Learn More,” “Shop Now,” or “Get Started.” The text should clearly convey the action or benefit to the recipient. We have an article on email CTA examples where you can find CTAs to use.
Ensure the text is center-aligned within the button for readability; use sentence case for simplicity and professionalism.
6. Font Size
Keep the font size between 16px and 20px for desktop emails. For mobile-friendly designs, verify the font is legible even at smaller sizes — don’t go lower than 14px.
Ensure sufficient color contrast between the text and background for readability. Don’t choose overly decorative fonts — stick to legible, sans-serif options like Arial or Helvetica. Check out our guide on the best fonts for email marketing for more tips and suggestions.
Third-Party Email Button Generators
If you aren’t too comfortable with HTML and CSS and wish to add a bulletproof email button to your marketing emails, try one of the tools we’ve shared below.
Campaign Master

This website offers a simple user interface to help you create an email button visually and then provides code for you to copy and paste into your email.
HTML Email Button Generator by Kim Connell

This free tool offers a visual builder for email buttons. You can simply choose from a selection of drop-down buttons and text fields to create a button. You can preview the button and once you’re satisfied with the results, you can copy the HTML code from the text field on the right.
Good and Bad Examples of Bulletproof Email Buttons
Let’s now check out real-world examples to illustrate the power of effective button design. We’ll examine both a poorly designed button and three well-crafted examples.
Broken Email from a Travel Booking Website

Here’s how your email could end up looking without a code-based email button. This email from EaseMyTrip is an eyesore and did absolutely nothing for the business except cost it time and money.
A Bulletproof Email Button Delivers Its Message

Above is an email from Slite, a centralized platform for team collaboration. The email went into the spam folder and Gmail prevents the loading of images for such messages. The email button, written in code, still managed to get the message across.
A Good Example of Email Accessibility

The above example illustrates how an email can look good even with zero images. This image-heavy version of this email promoting the Bajaj Allianz half marathon is visually appealing; the plain-text version did an equally great job of using code to look presentable.
Even Small Businesses Use Bulletproof Email Buttons

This email from a small t-shirt company called Aero Armour looks appealing even though its images have not loaded because it landed in the spam folder. Clearly, they should prioritize email deliverability over email design!
The message looks good, combining text sizes and colors aesthetically. It concludes with a prominent HTML-coded button to stand out.
10 Best Practices for Email Buttons
Follow these 10 best practices to ensure you’re doing email buttons correctly:
- Prioritize clarity: Use strong, action-oriented verbs for clear CTAs and keep button text short and sweet.
- Optimize for mobile: Ensure buttons are large enough for easy tapping, use responsive design, and consider adding extra padding for touch-friendliness.
- Choose the right colors: Select colors to contrast well with the background, align with your brand’s color palette, and evoke specific emotions or actions.
- Leverage shape and size: Standardize shapes (e.g., rectangular, rounded rectangular) and find the right balance between visibility and screen real estate.
- Consider placement: Strategically position buttons to draw the eye, avoid overcrowding, and use white space to make them stand out.
- Test thoroughly: Test across different email clients to ensure consistent rendering and use A/B testing to optimize performance.
- Use hover effects: Add subtle hover effects to make buttons more interactive.
- Prioritize accessibility: Use sufficient color contrast and font size to accommodate users with visual impairments.
- Leverage white space: Surround buttons with white space to make them stand out.
- Consider button borders: Use borders to define button edges and improve visibility.
Technical Topics To Help You Be a Better Marketer
On our blog, we cover a range of topics email marketers can learn and benefit from.
Campaign Refinery Best Practices Get You the Best Inbox Placement
Adhering to email best practices and being a trusted sender is the best way to ensure good email deliverability. But all your efforts are wasted if you’re sending from an email platform of ill repute.
This is where Campaign Refinery shines — as an email platform fully committed to best practices and ethical email marketing, our inbox placement is spectacular.
There’s a reason we are the #1 email platform for email deliverability!
There are numerous other advantages to partnering with us:
- Our automation builder is powerful and capable of handling complex email sequences.
- We offer robust segmentation tools for your email lists.
- You can use our built-in email gamification tool for open rates and click rates as high as 76.37% and 72.76% respectively.
- We screen all new signups to ensure spam email senders don’t access our platform.
- All this top-notch email performance is not hard on your pocket — Campaign Refinery pricing is marketer-friendly.
Join an elite circle of email marketers today — apply here to become a Campaign Refinery user!