email Bulletproof Buttons

30% OFF - 9th Anniversary discount on Entity Framework Extensions until December 15 with code: ZZZANNIVERSARY9

Introduction

Buttons can be one of the most frustrating parts of email development, but they can be built with code instead of images and still display well in all major email clients. When built in HTML/CSS, a button will display in all email clients even with images off. Both the content and style of each button can be quickly edited in HTML/CSS template.

Remarks

Progressive Enhancement with Media Queries

For clients that support media queries, any of the examples above can be progressively enhance the button.

Eg. @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }


Add more horizontal padding in Outlook

Conditionally adding non-breaking space on each side of a button link can increase the horizontal padding for Outlook. Especially useful for border-based buttons.

`<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->Link Text<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->`


Got any email Question?