Bulletproof Email Buttons
Progressively enhanced
using
VML
and
CSS
.
Button text
Keep it short and sweet so you don’t break the button.
Link URL
Font color
Background color
Background image
Host your image on your own web server, or a free service like
imgur
(use “Direct Link” URL).
Button width
px
Button height
px
Border color
Rounded corners
px
Preview
Pretty Button
Code
<div><!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://emailbtn.net/" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#1e3650" fill="t"> <v:fill type="tile" src="http://i.imgur.com/0xPEf.gif" color="#556270" /> <w:anchorlock/> <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Pretty Button</center> </v:roundrect> <![endif]--><![if !mso]><a href="http://emailbtn.net/" style="background-color:#556270;background-image:url(http://i.imgur.com/0xPEf.gif);border:1px solid #1e3650;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Pretty Button</a><![endif]></div>
Example styles
Plain
Red pill
iOS style
Success
Tweet
By
Stig
·
About
·
Bulletproof Email Background Images