I was attempting to use the bulletproof buttons (http://buttons.cm/) which look great, until I sent a test to gmail where it just showed as a link rather than a button.
<div><!--[if mso]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:170px;" stroke="f" fillcolor="#85724d"> <w:anchorlock/> <center> <![endif]--> <a href="#" style="background-color:#85724d;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:170px;-webkit-text-size-adjust:none;">SHOP NOW</a> <!--[if mso]> </center> </v:rect> <![endif]--></div>
Screen of issue;
Rendered HTML in Gmail:
<div> <a href="#14f4860e1251f3ee_">SHOP NOW</a> </div>
For now I've resorted to a table button from this article;
Thoughts on why the bulletproof button didn't work? Is this a bug with the convention that needs to be addressed or did I do something wrong?
That's certainly a strange issue. I sent myself an email using your exact code and wasn't able to reproduce this. The button renders as expected for me.
Are you sending the email with Campaign Monitor, or with a different ESP which might be altering your code?
If you click Show original in Gmail, that will give you the actual source code that was received by Gmail, regardless of how it's rendered in the email client.
Have a look at the troubleshooting steps to help determine what step the change is happening at.