Custom Email Template in Campaign Monitor for Outlook

Question

How can I solve the Outlook problem in my custom html template. What I currently have:

<table cellpadding="0" cellspacing="0" width="700" align="center">
          <tr>
            <td style="width:100%;display:block;" align="left">
              <!--[if mso]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:40px;v-text-anchor:middle;width:170px;" strokecolor="#ce162e" fillcolor="#ffffff">
                <w:anchorlock/>
                <center>
                <singleline label='Button Title'>Read More</singleline>
                </center>
                </v:rect>
                <![endif]-->
              <a href="https://" style="border:2px solid red;text-decoration:none;">
                <singleline label="Button Title">Read More</singleline>
              </a></td>
          </tr>
        </table>

If an outlook mail client opens the mail, I can see the CTA, but if I edit the CTA text in the editor in Campaign Monitor, the changes only apply to non-Outlook mail clients. Is there a way to solve that problem?

Many thanks in advance.

Bests, Yanick

Answer 1

Since you are using custom email template, you can replace your VML button with the one below. This button will work the same across all email clients. It will eliminate the issue you are facing in campaign monitor as well.

<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: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="[URL]" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; 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;" title="Call to action">Call to action</a> </td>
    </tr>
</table>