Email Buttons: How to Add Them and Why You Should Use Them

• An email button is a clickable, graphical call-to-action designed to stand out and guide a subscriber to take the next step.
• To add a button to your email, you can use the drag-and-drop editor in an email marketing platform to insert and customize the button with your own text, link, and colors.
• The main benefit of using a button is that it’s more visually prominent than a plain text link, which helps to increase click-through rates by making your call-to-action clear and easy to find.
• For best results, use a color that contrasts with your email’s background and write short, action-oriented copy to make it immediately obvious what you want readers to do.

You’re working on the next email to your list, and you want your readers to do something. To shop your sale, to RSVP to your event, to read your new blog post — whatever it may be. But how do you make sure they actually take that next step?

You could use a simple text link and hope they see it. Or, you could use a big, bright, impossible-to-miss button. (Guess which one we recommend?!)

A button is a visual magnet for the eye. It cuts through the noise and gives your reader one clear, simple job: click here!

So, how do you add one of these powerful little tools to your emails? In this blog, we’ll walk you through exactly how to add a button and design it to get all the clicks.

What exactly are email buttons?

An email button is a small, clickable, and often colorful shape that has a small amount of text on top that can be added to an email message using certain email marketing software. 

The button itself is created with code that, thankfully, neither you nor I need to know much about. That’s one reason why investing in email marketing platforms like Constant Contact is worth it. You don’t get this option when you send business emails with Microsoft Outlook, Google email, or other platforms designed for personal use.

This clickable button is a bright, obvious call to action. You can add buttons to email messages to make sure the reader is clear on the next step in the journey. Then, there’s no confusion about whether any underlined font is a link or not —with a button, you know. The clarity is in its simplicity.

These email CTA buttons can come in a bunch of shapes, although the rectangle and oval are the classic options. You can also choose any color in the rainbow for the button’s background color. You can set up any link for the button to navigate the reader onward. 

These can be different for every email you send, or you can choose one style and use it as part of your branding. There are many benefits of knowing how to add a button to emails.

HTML/VML vs. Image Buttons

You’ve got two main ways to create a button for your email. You can design it as an image, or you can build it with code.

It’s tempting to just design a beautiful button in a tool like Canva and pop it in as an image. The problem? Many email clients, especially Outlook, block images by default for security.

Ever opened an email and seen a bunch of empty boxes where images should be? If your button is an image, it disappears. No button means no click. It’s a huge problem.

The pro-level solution is to use a “bulletproof” button built with HTML and VML. These are made of code, not pixels, so they will always show up, even when images are turned off.

Here are a couple of code options you can copy and paste.

Option 1: The Simple & Solid HTML Button

This uses a basic HTML table with a background color to create a button that works almost everywhere. It’s a great starting point.

When to use this: You need a reliable button that works everywhere, fast. You’re okay with it looking like a square in some older email clients.

HTML

<table border="0" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td align="center" style="border-radius: 8px; background: #5C23F5;">
      <a href="https://your-link-here.com" target="_blank" style="font-size: 16px; font-family: sans-serif; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 8px; display: inline-block;">
        Shop The Sale
      </a>
    </td>
  </tr>
</table>

Option 2: The Bulletproof VML + HTML Button

This is the code the pros use. It includes special VML (Vector Markup Language) code that specifically tells Outlook to draw a nice, rounded-corner shape. For all other email clients, it falls back to the solid HTML version.

When to use this: You want your button to look great in almost every inbox, including tricky ones like desktop versions of Outlook.

HTML

<div>
  <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://your-link-here.com" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="15%" stroke="f" fillcolor="#5C23F5">
      <w:anchorlock/>
      <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
        Shop The Sale
      </center>
    </v:roundrect>
  <![endif]-->
  <!--[if !mso]><!-->
  <table border="0" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
      <td align="center" style="border-radius: 8px; background: #5C23F5;">
        <a href="https://your-link-here.com" target="_blank" style="font-size: 16px; font-family: sans-serif; color: #ffffff; text-decoration: none; padding: 15px 25px; border-radius: 8px; display: inline-block;">
          Shop The Sale
        </a>
      </td>
    </tr>
  </table>
  <!--<![endif]-->
</div>

Using a code-based button takes a tiny bit more effort, but it ensures every single one of your readers sees that all-important call to action. It’s a small bit of code for a much bigger click-through rate.

Does this all seem really complicated just to add a button to an email? With an all-in-one marketing platform like Constant Contact, you can add buttons to your emails simply by dragging and dropping. (More on that later.)

The benefits of using email buttons

It’s one thing to know how to create a welcome email. Adding the buttons to enhance your direct email messages is another thing. If you haven’t done it before simply because it seemed like too much work to figure out, let’s start by giving you some motivation to add your first call-to-action button.

They’re visually appealing and attention-grabbing

The best thing about email buttons is that they jump out at you on the screen. No, they’re not three-dimensional, but they are dynamic content designed to get your attention. Because the text on the button is framed in a color that’s different from the rest of the email template, you’re using the power of graphic design to draw the eye where you want it.

But you also don’t have to limit yourself to a single color as the background. For example, you can use PicMonkey, which is a photo-editing tool available through the Constant Contact platform, to create a mobile-friendly button from an image. You simply type the text over the photo, and voilà! Any photo in your library on the platform can be made into a button.

They’re clear and concise

If you want your email template design to look good, the buttons can’t be too big. The button size will automatically increase or decrease with the amount of text and font size. The more focused you are when writing your call-to-action text over the entire button, the better.

While that might be a challenge, it will result in a clear and concise action button that gets clicks. This goes back to the marketing truth about people wanting to be told what to do next. When you only have a few words, there isn’t too much thought users have to put in before clicking.

They’re easy

That’s the great thing about knowing how to add a button to email: Clicking is muscle-memory for your subscribers. Think about my ticket purchase: It didn’t take me any time to know exactly how to make the purchase. It was obvious because the promoter knew how to add a button to email. With this simple action, you’ll be creating an effective email that yeilds the return on investment you are seeking for your marketing campaign. 

The best way to see results in marketing is to reduce what is known as friction. Friction is what gets in the way of the customer doing the action you’d like them to take. 

An example:

Let’s say you want them to check out the latest styles in your fashion catalog, and the reader wants to see them. An example of friction would be if the link to the catalog were hidden in the middle of a paragraph of regular text. The email recipient would have to spend a few seconds finding where to click. Those few seconds are friction, and that’s enough time for someone to get distracted with a million other things. When you make it easy for subscribers to understand what action you want them to take, there’s less friction.

They can be customized to match your brand

You want your marketing emails to reflect your brand’s values, style, and tone just as you would for your website and other landing pages. Buttons can be customized to fit in with your style.

When you first start the work to create a consistent brand for your company, you’ll need to determine fonts and a color palette that works with your style. Let’s say you run a hair salon and love a muted, pastel color scheme. You don’t want your email hyperlink button to be neon orange. Good news: It can be any color (or image) you want, as long as it aligns with your brand or partnership. 

They can be tracked and analyzed

As you send emails as part of a longer-term marketing strategy, you’ll want a campaign monitor in the form of metrics. That is, you need to be able to measure the success of your email strategy — and buttons are a great way to do it.

Let’s say you have a landing page with a seasonal special. You should be able to track how many people visit the page over time with the backend of your website, but you may still be wondering how these leads found the page. 

One way to track it is through adding a button to the email. You’ll know every time someone clicks on buttons in your promotional emails, and then you can crunch the numbers to see how many of those leads get converted into sales at the end of your campaign.  

How to add an email button in Constant Contact (drag-and-drop)

Now that you know the benefits of email buttons, you’re ready to insert and customize a button for your next message. In Constant Contact, you’ll have a section on the screen with blocks you can drag and drop from a menu into your chosen template. There are a few steps that go into adding an HTML email button.

1. In that section with blocks, you’ll see there’s a “button” option, so start by just grabbing that block with your computer’s mouse and dragging it to where you’d like it within a column on the template. Some templates already have buttons pre-programmed in.
2. Once it’s where you want it in the email, click on it, and you’ll see options for picking the font, font size, and background color. Click on the arrow next to the pouring paint can to open up the options for colors.
3. Click on the link option in that same button menu. You’ll see all the types of links you can create for your button, from linking to a webpage to a giftcard. For this first button, let’s have it link to a landing page on your website. Click “web page” and add the URL from the top navigation bar of your browser. 
4. Next, it’s time to add text to the button. Make sure your copy aligns with your campaign goal and that the tone drives action, whether through urgency, cheekiness, or something in-between.  
5. Finally, click the “enable click segmentation” option, which will allow you to send targeted emails to those who have and haven’t clicked. Tap the “insert” button at the bottom of the page, and you’ve done it!

Email button best practices (copy, size, placement, testing)

Whether it’s an email share button or a button sending people to a blog post — or anything in between — the initial creation is pretty easy. Try these best practices to get your email list members to click exactly where you hope they will. 

Use clear and concise text

Once you know how to add a button for email, you’ll see that it will grow in size by adding text, so try to keep your call-to-action phrases as simple and direct as possible. Some popular options include:

• Buy it now
• Download here
• Donate today
• Reserve your seat
• Take a look
• RSVP now
• Discover
• Learn more
• Try it yourself

Feel free to be creative and adhere to your brand. If your target audience is young and fun-loving, you can try “Check it out” or “Sweet, I’m in!” If your target audience is more professional, a subdued “I’m interested” may be more appropriate. 

Make sure the button is large and easy to click on

That being said, you don’t want the button to be too small or hard to find. Pick a color that makes it pop out from the rest of the email message. Add some white space around the button to give it a frame that draws in the eye. Make the font of the button large enough so that it’s easy to read.

Also, make sure the shape is easy to click on. This is another potential cause for friction in your call-to-action message. Test the button on both a desktop and mobile — action should be easy for anyone, anywhere, before you add the button to an email.

Pre-send testing checklist

Your button looks amazing. You’re ready to hit “send,” right? Almost.

Time for a quick pre-send check. This little five-minute routine can save you from a major headache and make sure your button does its job perfectly.

The client and device check

Your email won’t look the same in every inbox. Before you send it to your whole list, send a test to yourself and a few colleagues. Open it in a few key places:

• Gmail (on a computer and on your phone)
• Outlook (this one is notorious for being tricky)
• Apple Mail (on an iPhone)

Does your button look great everywhere? Does it show up even when images are off? A quick visual check can spot a problem before your customers do.

A/B testing ideas for your button

Want to get even smarter with your emails? Try a simple A/B test on your button to see what your audience responds to. Just remember the golden rule: only test one thing at a time.

• Test your copy. Try two different versions of your button text. For example, does “Shop Now” get more clicks than “See The New Collection”?
• Test your placement. Does a button at the very top of your email work better than one at the bottom? Send two versions and let your audience tell you what they prefer.

Accessibility and tracking checks

This is the final polish that makes sure your email works for everyone and that you get the data you need.

• Check your color contrast. Is the text on your button easy to read against the background color? If it’s hard to see, people won’t click. Use a free online contrast checker to be sure.
• Think about screen readers. This is where using a real HTML button pays off. Screen readers for visually impaired users can easily identify a coded link, but they can’t read text that’s part of an image.
• Verify every single link. Click your button one last time. Does it go to the right page? If you’re using any UTM codes for tracking, are they set up correctly? It’s the last, most important check before you launch.

Track and analyze the results of your email campaigns

When you send a message out to your list, it can feel like each email address is an unknown. It can be challenging to know if you’ve hit your mark. The way to know if you have success in your email campaign is to create an email measure, or what is known in marketing as key performance indicators, or KPIs.

KPIs are quantifiable metrics that you can measure and analyze over time to determine what you’re doing right and what you may need to improve. These customer relationship measurement metrics should be directly connected to the goals and objectives you set at the beginning of your campaign. 

Of course, when you add a button to an email, you can use that click as a KPI. Divide the number of clicks by the total number of emails you sent, and you’ll get a rate you can compare to your next message. If you aren’t getting the results you seek, you may want to change your message, your button, or your landing page. 

Email button placement strategies

You’ve designed a beautiful, clickable button. But where exactly should you put it? The placement of your button is just as important as its color or size. It’s all about putting it where your reader’s eye will naturally go.

Here are a few simple strategies to guide you.

Above the fold vs. below the fold

“Above the fold” is a classic design term. (Think about a newspaper: the most important headlines go “above the fold.”) In email, it means everything your reader can see on their screen without having to scroll down.

If your email has one single, urgent goal, you should put your most important button right there, above the fold to make it impossible to miss.

Repeat your CTA in longer emails

Are you sending a longer email, like a newsletter with a few different sections? Don’t be afraid to repeat your main call to action. A good rule of thumb is to place a button near the top, another in the middle, and a final one at the very end.

This gives your reader multiple chances to click without ever having to scroll back up. Just follow one simple rule: keep them consistent. The repeated buttons should look the same and use the exact same text to avoid any confusion.

Match the placement to the intent

The purpose of your email should always dictate your button placement.

• For a big sale announcement: Your goal is immediate action. Place that “Shop Now” button high up in the email, right after your main headline and image. Make it the star of the show.
• For an educational newsletter: Your first goal is to get them to read and absorb your great content. In this case, your main call to action button (like “Read the Full Article”) might work best after your introductory paragraph or the article summary. You’re inviting them to take the next step after you’ve provided value.

Create email buttons to boost your campaigns

An email button is powerful visual cue that cuts through the clutter, grabs your reader’s attention, and makes it super easy for them to take that next step. It’s the clearest way to say, “Click right here!”

Just remember to give it one last test click before you send it on its way to make sure all is working as intended. Then, get ready to see what a great button can do for your next email.