Log In / Sign Up

Components

Layouts

Templates

HTML Email Buttons

Your CTA button is one of the most important elements in your email. If it doesn’t render correctly, you risk losing clicks—and conversions. That’s why bulletproof buttons, built with HTML and inline CSS, are essential for consistent, reliable performance.

What is a Bulletpoof Button?

A bulletproof button is a CTA created with HTML and inline CSS instead of images. It displays correctly across major email clients, even when images are disabled, and ensures accessibility and ease of maintenance.

1. Conditional Padding Button (Great for Outlook)

Outlook doesn’t render padding the same as other clients, so this method adds Outlook-specific code without affecting the rest.

Pros:

  • Great support across clients
  • Entire button is clickable

Cons:

  • Outlook corners can’t be rounded
  • Takes tweaking to get padding right

Example:

See the Pen Conditional Padding Button by Email Code Camp (@EmailCodeCamp) on CodePen.

2. VML-Based Button (The Outlook Classic)

VML (Vector Markup Language) is used specifically for Outlook. This method creates a shape in Outlook and uses regular styling for everything else.

Pros:

  • Rounded corners in Outlook!
  • Works well in most clients

Cons:

  • Uses VML, which is obscure and Microsoft-specific
  • Harder to update
  • Some ESPs don’t track the VML URL

Example:

See the Pen VML-Based Button by Email Code Camp (@EmailCodeCamp) on CodePen.

3. Padding-Based Button (Simple Table-Based)

This method uses <table> and <td> to create structure, with padding inside the cell and basic styles on the link.

Pros:

  • No VML required
  • HTML-only

Cons:

  • Corners can’t be rounded in Outlook
  • Only the text (not the whole button) is clickable

Example:

See the Pen Padding-Based Button by Email Code Camp (@EmailCodeCamp) on CodePen.

4. Border-Based Button (Clever CSS Trick)

This trick styles the <a> tag directly by using thick borders to simulate padding. It’s all inline CSS.

Pros:

  • Clean code — no tables or VML
  • Entire button is clickable

Cons:

  • Borders may render slightly smaller in Outlook
  • Rounded corners won’t show in Outlook

Example:

See the Pen Border-Based Button by Email Code Camp (@EmailCodeCamp) on CodePen.

5. Padding + Border Button (Best of Both Worlds)

Combines padding, borders, and table structure. A more flexible and robust approach.

Pros:

  • Works well across devices
  • More consistent in Outlook

Cons:

  • Slightly more complex to implement

Example:

See the Pen Padding + Border Button by Email Code Camp (@EmailCodeCamp) on CodePen.

Email Client Support

MethodWorks in OutlookMobile FriendlyRounded Corners
Conditional Padding✅✅❌ (Outlook)
VML✅✅✅
Padding✅✅❌ (Outlook)
Border✅✅❌ (Outlook)
Padding + Border✅✅❌ (Outlook)

Final Thoughts

Bulletproof buttons are essential for modern email design. They ensure your subscribers see and interact with your most important CTA — no matter the email client or device.

Use the methods above to build smart, responsive, and accessible buttons that work. Test early, test often, and always put the user experience first.