Outlook Converting CSS Button Into Image

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?