I've never been happy with the VML solution for "buttons" (links) in email. Lots of code, doubling the href, can't be nested inside VML background. I've been using the mso-border-alt method but I'm not happy with those either.
I'll break the styles down a bit so it makes sense.
text-decoration:none;background:green;color:white;text-transform:uppercase;border-radius:10px;border:2px solid black;
This part if just standard styling, nothing exciting here
display:inline-block;
This helps vertical alignment in HTML email clients
font-size:50px;line-height: 1em;
This defines the height in both HTML email clients and MSO, be aware this can cause issues if the text drops to 2 lines.
letter-spacing: 50px;
This helps define the left/right padding. We also need a either side of our text to take this space.
<span style="letter-spacing:0;font-size:16px;vertical-align: middle;mso-text-raise:10px;">Click it</span>
To avoid our text looking very spaced out we need to wrap it in a span and reset the letter spacing and font-size to what we're after. Also adding vertical-align for HTML email clients and mso-text-raise for MSO.
Pros
Less code, this uses 382 characters, equivalent in VML uses 706 (this varies depending on styling, length of text and length of url).
Only 1 href, this avoids potential issues a number of systems have with duplicate href
Cons
We lose rounded corners on MSO
We don't have an exact width, this can be achieved in HTML with a little extra code but not for MSO.
Issues
Outlook mobile apps remove the first .
Some ESP's may reformat the code to add additional spaces alongside the this could increase the left/right padding
Ideas
It's less hacky and preferable to style the "button" (link) normally for HTML email client then add MSO specific code. We can use mso-ansi-font-size instead of font-size and mso-font-width instead of letter-spacing although that's a % and harder to get an exact size.
I've never been happy with the VML solution for "buttons" (links) in email. Lots of code, doubling the href, can't be nested inside VML background. I've been using the
mso-border-altmethod but I'm not happy with those either.So I'm working on a new version...
Code
I'll break the styles down a bit so it makes sense.
text-decoration:none;background:green;color:white;text-transform:uppercase;border-radius:10px;border:2px solid black;This part if just standard styling, nothing exciting heredisplay:inline-block;This helps vertical alignment in HTML email clientsfont-size:50px;line-height: 1em;This defines the height in both HTML email clients and MSO, be aware this can cause issues if the text drops to 2 lines.letter-spacing: 50px;This helps define the left/right padding. We also need a either side of our text to take this space.<span style="letter-spacing:0;font-size:16px;vertical-align: middle;mso-text-raise:10px;">Click it</span>To avoid our text looking very spaced out we need to wrap it in a span and reset theletter spacingandfont-sizeto what we're after. Also addingvertical-alignfor HTML email clients andmso-text-raisefor MSO.Pros
Cons
Issues
. this could increase the left/right paddingIdeas
It's less hacky and preferable to style the "button" (link) normally for HTML email client then add MSO specific code. We can use
mso-ansi-font-sizeinstead offont-sizeandmso-font-widthinstead ofletter-spacingalthough that's a % and harder to get an exact size.