I'm making template emails in Marketing Cloud. I'm using the "button" content block to create my buttons that have a 30px border radius. It looks fine, but when I test it, in some versions of outlook, the button looks squared and without any padding. ¿Has anyone encountered with this and has a way to solve it?
Hope someone could help me solve this issue
Right now, my code looks like this inside the HTML editor of the block:
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td align="center"><table cellspacing="0" cellpadding="0" border="0"><tr><td class="innertd buttonblock" style=" border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; color: #FFFFFF; background-color: #FF6B00;" bgcolor="#FF6B00"><a target="_blank" class="buttonstyles" style=" font-size: 22px; font-family: Arial, helvetica, sans-serif; color: #FFFFFF; text-align: center; text-decoration: none; display: block; line-height: 100%; background-color: #FF6B00; border: 0px none transparent; padding: 11px 30px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;" href="https://www.link.com/" title="Leer más" alias="" conversion="false" data-linkto="https://">Leer más</a></td></tr></table></td></tr></table>
UPDATE The main issue with my button was that it had an empty href="" attribute, and that made it look like the last-right version, without any padding.
Also noting that SFMC's button element is not rendered correctly across all email clients, it hasn't changed in many years, and I don't think they care too much about it.
What I do now is using a custom HTML block, and defining a bulletproof button, like Mark Robbin's link button. It helps maintain the paddings, spacings and text format, only thing you lose on Outlook is the rounded borders. It doesn't use VML, so it won't break your metrics.
Here is the link directing to his code, which is very useful: https://www.goodemailcode.com/email-code/link-button
