As our digital marketing group takes on more and more client work here in Chicago, we keep adding new nuggets to our bag of email marketing tricks. I thought I'd share some code I worked up related to delivering CSS buttons within a marketing email.
It can be tricky to apply CSS to email marketing HTML because the support varies wildly across email clients. Gmail, in particular, makes it difficult to apply advanced CSS properties to your email links because it doesn't simply ignore rules it doesn't like, it will throw out ALL of your CSS rules, leaving your link looking naked and ugly.
Gmail will support the use of the background-color property and border-radius, but as soon as you try to apply box-shadow, text-shadow, or any kind of gradient, it will punish you by ignoring all of your CSS rules for a particular link. This can force you to limit your design to the lowest common denominator or to resort to the use of images.
The technique that I'm going to share here gets around the Gmail problem by using nested span tags which get different style rules. The outermost span creates a box with a flat color and rounded corners. This span is what will be shown by Gmail. Nested within this span is another span that duplicates the outer box, but adds a gradient and box shadow. The gradient and shadow will cause this span's rules to be ignored by Gmail, but this isn't a problem because the outer span will provide some basic button styling. The anchor tag sits within these 2 spans and this is where the text styling is applied. The final touch is a 3rd span tag that is nested inside of the anchor where I add a text shadow. Again, Gmail doesn't look kindly on the use of text shadow, but it will simply ignore this span tag and apply the styling of the anchor.
Here is the code sample:
<span style="display: inline-block; border: 1px solid #64B8DD !important;
border-radius: 5px !important; background-color: #098CC9 !important;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #69C6EA), color-stop(50%, #64B8DD), color-stop(50%, #42ACDD), color-stop(100%, #098CC9));
background-image: -webkit-linear-gradient(top, #69C6EA 0%, #64B8DD 50%, #42ACDD 50%, #098CC9 100%);
background-image: -moz-linear-gradient(top, #69C6EA 0%, #64B8DD 50%, #42ACDD 50%, #098CC9 100%);
background-image: -ms-linear-gradient(top, #69C6EA 0%, #64B8DD 50%, #42ACDD 50%, #098CC9 100%);
background-image: -o-linear-gradient(top, #69C6EA 0%, #64B8DD 50%, #42ACDD 50%, #098CC9 100%);
background-image: linear-gradient(top, #69C6EA 0%, #64B8DD 50%, #42ACDD 50%, #098CC9 100%);
border: 1px solid #64B8DD;
-webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
-moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
style="color: #fff; text-decoration: none; padding: 5px 10px;
font-family: 'helvetica neue', helvetica, arial, sans-serif; font-weight:bold; font-size:20px;
display:inline-block; line-height:2; text-align:center; width:125px; "><span
style="text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);">Buy Now!</span></a></span></span>