Outlook Converting CSS Button Into Image

Question

I have created a button in HTML for outlook with CSS styling:

<!--Join Meeting Button-->
    <tr>
        <td colspan="2" align="center">
            <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${meetingUrl}" style="height:50px;v-text-anchor:middle;width:250px;" arcsize="50%" stroke="f" fillcolor="#ad122a">
                    <w:anchorlock/>
                    <center>
            <![endif]-->
            <a href="${meetingUrl}" style="background-color:#ad122a;font-family: sans-serif; border-radius:25px;color:#ffffff;display:inline-block;font-size:17px;line-height:50px;text-align:center;text-decoration:none;width:250px;-webkit-text-size-adjust:none;">Join Meeting</a>
            <!--[if mso]>
                </center>
                </v:roundrect>
            <![endif]-->
        </td>
    </tr>

And it looks fine in the draft email, but when I send the email, the Join Meeting Button is displayed as an image, as if converted, and the link does not work. The link works fine in the draft email using CTRL + Click.

Is there a way to prevent this?

Answer 1

Outlook desktop apps convert buttons into image. please your following code for perfect style of button on every email client.

    <!--[if mso]><a href="${meetingUrl}" target="_blank">
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" stripoVmlButton href="${meetingUrl}" 
                style="height:41px;v-text-anchor:middle;width:131px;" arcsize="61%" stroke="f" fillcolor="#ad122a">
        <w:anchorlock></w:anchorlock>
        <center style='color:#ffffff;font-family:arial, "helvetica neue", helvetica, sans-serif;font-size:14px;font-weight:700;'>Join Meeting</center>
    </v:roundrect></a>
<![endif]-->
    <!--[if !mso]><!-- --><span class="msohide es-button-border" style="border-radius: 0px; border-width: 0px; background:#ad122a; border-color: #ad122a;"><a class="es-button" href="${meetingUrl}" style="font-size: 17px; font-weight: bold; border-radius: 25px;" target="_blank">Join Meeting</a></span>
    <!--<![endif]-->

Or you can use this site to create buttons https://buttons.cm/