简体   繁体   中英

Html email button styling for any email clients

I have following code to build button for html email, I just want to know will it render in all email clients without any issue?

<table border="0" cellpadding="12" cellspacing="0" bgcolor="#00b5cc" style="border-radius:4px;">
    <tr>
        <td align="center">
            <a href="#" target="_blank" style="text-decoration:none;">
                <font color="#fff">Text here</font>
            </a>
        </td>
    </tr>
</table>

Below is a condensed code from Email on Acid 's site. I have been using this and it renders the same across all email clients.

Things to note:

  • If you want to remove rounded edge, remove it for both border radius (td and a tag). It will render as sharp edged on Outlook either way.
  • If you remove the background colors on the td and a tag it should show you a CTA that has a border around it. This will still render the same across all email clients

 <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;"> <tr> <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius:5px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Call to action</a> </td> </tr> </table>

Hope this is what you were looking for.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM