Search code examples
htmlcssemailoutlooksignature

Email signature button not styling once put into Outlook?

I'm trying to make a simple button that will display in an email signature, using inline CSS. It's working fine when opening in a browser, but when put into Outlook it's not styling correctly.

Here's what it should look like:

enter image description here

Here's what it looks like once it's copied into Outlook:

enter image description here

I'm guessing that because I have to literally copy/paste the signature from a web browser (once opening the html file) to the signature box in Outlook, the inline CSS is not compatible with Outlook's text editor.

This is the inline CSS I'm using, is there a better way I could do it? The signature template is using Tables.

<style="color:#fff; text-decoration: none; background: #1a8fce; 
padding: 10px; border-radius: 5px;">
Solution

  • Here's a helpful link for this issue. Outlook is very picky on how you style it. https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

    Here's a code example of how to fix it. You may have to tweak it a bit:

    <!--[if mso]>
   <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
      <w:anchorlock/>
      <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
    </v:roundrect>
 <![endif]-->