Content5 min read•Audience: All, Designers, Marketers

Button Block (mj-button)

Build bulletproof email buttons that render consistently across Microsoft Outlook, Gmail, and Apple Mail.

Key Takeaways

PostBrix buttons compile to VML-backed bulletproof buttons for 100% clickability in Outlook desktop.
Customize background color, text color, font size, font weight, border radius, and internal padding.
Configure full-width buttons on mobile screens for effortless thumb tap targets.
Ensure buttons meet the minimum touch target requirement of 44x44 pixels.

What is a Bulletproof Button?#

In standard web development, a button is simply an <a> or <button> tag with CSS padding. However, Outlook desktop ignores vertical padding on inline tags and frequently breaks background colors.

A bulletproof button uses a combination of table cells and Microsoft Vector Markup Language (VML) to guarantee that:

The button background color renders across all clients.
The entire surface area (including padding) is clickable.
The button maintains its intended border radius and typography.

PostBrix automatically handles all underlying VML generation when compiling mj-button.

Button Styling Options#

Select any Button block to customize:

Button Text: Double-click to type directly or bind to a variable (e.g. {{ctaLabel}}).
Destination URL: The target link. Always use absolute https:// links.
Background & Text Color: Set primary brand colors and ensure strong contrast.
Inner Padding: e.g., 14px 28px for a prominent, inviting touch target.
Border Radius: Set rounded pill (9999px) or subtle rounded corners (6px).
Fluid on Mobile: When enabled, the button automatically stretches to 100% width on mobile screens, making it easy for users to tap with their thumb.

Frequently Asked Questions

Why do my rounded buttons appear rectangular in Outlook for Windows?

Outlook 2016–2021 uses Microsoft Word as its HTML engine, which does not support CSS border-radius. The button still retains its colors, text, and clickability, but displays clean square corners.

Can I add an icon inside a button?

In email HTML, embedding inline images inside button anchor tags often causes layout glitches in Outlook. We recommend keeping buttons text-only, or placing a small icon block directly above the button.

Build Emails

Colors