email Bulletproof Buttons
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]> <![endif]-->Link Text<!--[if mso]> <![endif]-->`
