Credit
Huge thanks to our very own email ninja, Stig for making this tool. Say thanks @stigm
Design gorgeous buttons using progressively enhanced VML and CSS. You can also create rock-solid background images in emails too.
If you're still having trouble, feel free to email support@campaignmonitor.com your full template/campaign files, as well as a screenshot showing the issue clearly in the relevant email client(s).
Unfortunately, these buttons can not be placed on top of background images, because Outlook doesn't support nested VML elements. In many cases though, you may be able to code the design up successfully by changing the structure.
For instance, if only part of the image needs to be behind text content, you can sometimes slice the image, use a bulletproof background image for only that part of the design, and use bulletproof buttons or inline images (held together by a table structure) for other parts.
Because Outlook doesn't support @media queries, you only need to worry about the email clients that do. So only the HTML element needs to be responsive, not the VML. As a general recommendation, using mostly pixel based widths in the HTML is more reliable, and you can then override this with other pixel or percentage based widths for other viewports like with any responsive web design.
To get started, give your button link a class or ID that you can target. Then in any appropriate @media queries, give the link(s) different dimensions, background images, etc.
This technique can only create buttons with repeating background images. To stop it from repeating visibly in one or both directions, you’ll want to make sure the background image is at least the size of the button, with any extra spacing added around the background image file itself if necessary. Also make sure the button is more than wide enought to fit the label, so it doesn’t accidentally break across two lines if the font changes slightly.
Unlike most other email clients and browsers, Outlook 2007/2010/2013 uses the DPI of your background image to determine the scale. So to make sure it renders at the right size, set the image's resolution to 96 DPI.
Unfortunately, the button URL, text, and other attributes can not be made editable in our editor.
If you’d like to see this feature added to the editor, make your voice heard in our forums or by email.