Guide to Creating HTML Email Buttons That Work (With Code Examples)

ByAparna Seshadri


Linkedin logo
Twitter logo
copy link
Facebook logo
Whatsapp logo
Pinterest logo
mail logo

Everyone seeks to refine their marketing efforts with the help of technology. One of the strongest marketing channels is email marketing, and email marketers design campaigns tailored to reach the recipient's inboxes. But how do we make these messages informative, engaging, and interactive? That's where HTML email buttons step in.

In this guide, we'll delve into the HTML email button, its benefits, and how to set an HTML email button that enhances user experience and elevates your email campaign performance.

Table of Contents

What is an HTML email button?

HTML email button refers to the button element created using HTML and CSS. In emails, these buttons are often used as call-to-action elements, with links to a website, product page, or survey.

Due to email client restrictions and varying CSS support, HTML buttons in emails are coded similarly to regular HTML buttons. They are crucial for enhancing the interactivity of email campaigns, such as a newsletter, which leads to increased engagement.

Types of HTML email buttons

As we know, a common use case of email HTML buttons is facilitating interactivity that encourages recipients to take specific actions.

1. Bulletproof button

Bulletproof buttons are designed to work reliably with various email clients. Utilizing code alone ensures the button's display across all email clients, even with images disabled, making it completely bulletproof.

They often utilize inline CSS styles, enhancing compatibility and rendering correctly in clients that might not fully support external stylesheets. The bulletproof buttons are responsive, adapting seamlessly to different devices and screen sizes. The advantages of compatibility with different email clients make it a viable option.

2. HTML Email Button

Regular email buttons are created using standard HTML and CSS, similar to website buttons. They face challenges in rendering, especially with varying CSS support across different email clients.

Standard HTML buttons might lack some interactive features due to limitations in certain email clients. Achieving consistent design and functionality can be complex, requiring thorough testing and adjustments for different clients. In some email clients, CSS support is limited, limiting design flexibility.

Benefits of using email buttons

The most significant advantage of using email buttons is to increase your CTRs and ROIs. In comparison to a hyperlinked text, email button attracts more attention and so encourages subscribers in your email list to click on the CTA.

Hence, as we look into the benefits offered by the email buttons, these make it to the top of the list:

  • In addition to being visually appealing, email buttons can attract people's attention and action.

  • HTML buttons can be optimized for mobile devices, ensuring a seamless and responsive experience across various screen sizes, which is crucial for today's growing mobile users.

  • Well-designed buttons enhance the beauty of the email design and encourage recipients to explore further.

When your Call-to-Actions (CTAs) are embedded within images, there's a significant risk that your subscribers might overlook your message. Worse yet, they might not engage with your campaigns at all.

How to add an email button in HTML?

Creating universally compatible button styles for all is challenging, considering the vast variety of email renderings. Instead, focus on crafting buttons that function across most platforms. There are diverse methods to achieve this based on your requirements. But here, we will look at how to do it with HTML and CSS:

HTML email buttons offer flexibility in design, allowing for both full-width and fixed-width options based on your email layout preferences.

To implement HTML email buttons, you'll need to code your email template using the following HTML code structure manually:

<a href="" class="email-button">Contact Us</a>

The CSS styles define the button's appearance. display: inline-block; makes the button inline with the text, padding sets the button size, background-color and color define the button's background and text color; border-radius rounds the button corners, and transition adds a smooth color change effect on hover.

After completing the HTML setup for the email button, you can use CSS to add border and padding to the text. This ensures the entire button area is clickable, not just the button text.

display: inline-block;

padding: 10px 20px;

background-color: #007bff;

color: #fff;

text-decoration: none;

border-radius: 5px;

font-weight: bold;

transition: background-color 0.3s ease;

background-color: #0056b3;

CSS styles determine how the button looks. display: inline-block; aligns it with text, padding sets size, background-color and color decide colors, border-radius rounds corners, and transition adds smooth color change on hover.

In this CSS code, adjust the padding to change the button size, modify the background color for different colors, and customize other properties per your design preference.

What are the dos and don’ts of HTML email buttons?

Impactful email buttons are visually appealing and function seamlessly. Here are some key guidelines to kickstart your design process:

  • With inline CSS, you can apply styles directly to the button to ensure consistent rendering across email clients.

  • Test your email button across various email clients and devices to ensure it displays correctly for all users.

  • Utilize tables to structure your email buttons, as some email clients do not fully support modern CSS layout techniques.

  • Design buttons that are touch-friendly and easy to click on mobile devices. A minimum touch target size of 44x44 pixels is recommended.

  • Adding arrows to the CTA gives the user an extra hint that they should click to move forward.

To make your email buttons interactive and attract the attention of your recipients, it’s important to do away with implementing HTML email buttons:

  • Do not use javaScript within email buttons, as most email clients disable javaScript for security reasons.

  • Avoid using buttons that are only images. Users won't see the button or its functionality if images are blocked.

  • Don't overload your email with too many buttons. Focus on one or two primary call-to-action buttons to avoid confusing recipients.

An alternative to HTML email button: Mailmodo

Not everyone loves coding or has the time to code when sending to a wider audience. Email Service Providers (ESPs) have significantly improved the effectiveness of Calls to Action (CTAs) in email marketing campaigns. Mailmodo makes it easier to add CTAs to your email by picking a template that fits your needs.

You can also optimize your CTA using specific action words like Get, Start, and Join instead of generic ones. Your CTA button is readable, and you can also optimize it based on the campaign data you start to receive once you send out the first batch of emails.


As a part of our email marketing strategy, we check the health of our campaign through different indicators. The number of clicks is the most important KPI, as they guide recipients seamlessly from mere readers to active participants.

Throughout this exploration of HTML email buttons, we've delved into their diverse types and dissected the art of creating them using HTML and CSS. But these buttons are more than just lines of code; they embody the essence of interactivity. Their visual appeal captures attention, responsiveness ensures seamless experiences across devices, and subtle cues guide users effortlessly.

What you should do next

Hey there, thanks for reading till the end. Here are 3 ways we can help you grow your business:

  1. Talk to an email expert. Need someone to take your email marketing to the next level? Mailmodo’s experts are here for you. Schedule a 30-minute email consultation. Don’t worry, it’s on the house. Book a meet here.

  2. Send emails that bring higher conversions. Mailmodo is an ESP that helps you to create and send app-like interactive emails with forms, carts, calendars, games, and other widgets for higher conversions. Get started for free.

  3. Check out our AI prompts library. If you need AI prompts for ChatGPT or Bing, here's a ready-made database we’ve built to help marketers succeed at prompt engineering. Get your AI prompts here.

  4. Get smarter with our email resources. Explore all our knowledge base here and learn about email marketing, marketing strategies, best practices, growth hacks, case studies, templates, and more. Access guides here.

Frequently Asked Questions

To create an email button in HTML, you can use the (anchor) tag along with CSS to style it as a button. In this example, the href attribute contains the email address you want the button to link to.

To connect an email with a button in HTML, you can use the mailto protocol in the href attribute of the a tag. When a user clicks the button, it will open their default email client with a new message window addressed to the specified email address.

Creating a button in an email involves using HTML and inline CSS styles, as some email clients do not fully support external stylesheets.

Yes, using an image as a Call to Action (CTA) button is okay. However, you should ensure the image is clear, visually appealing, and appropriately represents the action you want the user to take.

What should you do next?

Thanks for reading till the end. Here are 3 ways we can help you grow your business:


Get smarter with our email resources

Explore our email marketing guides, ebooks and other resources to master email marketing.


Do better email marketing with Mailmodo

Send app-like interactive emails with forms, carts, calendars, games, etc. to boost email ROI.


Talk to an email expert

Get a 30-min. free email consultation with a Mailmodo expert to optimize your email marketing.

Was this post useful?

Improve your email marketing

With interactive emails, smarter automation workflows, AI-powered email content and higher conversions