Skip to main content
A
Contributor IV
Anh Nguyen
Contributor IV
October 30, 2024
Solved

My CTA button disappear on Outlook

  • October 30, 2024
  • 6 replies
  • 542 views

Hi team,

 

I’m desperated for your help. 

 

I’m having some issues with the button display on Outlook - old version. In short, the black button on white background does not show up on old Outlook. Not sure if it’s a bug from Klaviyo or it’s just because of Outlook. Kindly help to check.

 

I have attached below 2 images for illustration of how it looks on Klaviyo and on Old Outlook. 

 

On Klaviyo: 

 

On Outlook - old version:

 

 

I’m really looking forward to your response. Thank you so much!

 

Best regards,

Anh

    This topic has been closed for replies.
    Best answer by chloe.strange

    Hi there, 

    Following up here to summarize the situation. This is not a bug in our email template editor that could be triaged, but rather an issue in how Outlook renders HTML differently from other inbox providers (this guide provides more details on this). Specifically, from Outlook 2007 onwards, Microsoft stopped using Internet Explorer to render emails and instead opted to use Microsoft Word as its rendering engine. This creates a less than ideal environment for email marketers and developers who use HTML.

    As a workaround, you can design a button image using a site like Canva and upload it as an image block. You can then link the image using the same variable as the button. I hope this helps!

    ~Chloe

     

    6 replies

    ArpitBanjara
    Principal User II
    ArpitBanjara
    Principal User II
    October 30, 2024

    Hey @Anh Nguyen 

    Old versions of Outlook use Microsoft Word's rendering engine instead of standard web rendering, which often causes display issues with buttons.

    I would suggest you use VML (Vector Markup Language) for Outlook, while maintaining standard HTML for other email clients. 

    Would you be able to share your current button code so I can provide more specific guidance?

    Cheers

    Arpit

    Arpit Banjara - Lead Email Marketing Specialist at Flowium
      A
      Contributor IV
      Anh NguyenAuthor
      Contributor IV
      October 30, 2024

      <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title> </title> <!--[if !mso]><!--> <meta content="IE=edge" http-equiv="X-UA-Compatible"/> <!--<![endif]--> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/> <meta content="width=device-width, initial-scale=1" name="viewport"/> <!--[if mso]> <noscript> <xml> <o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml> </noscript> <![endif]--> <!--[if lte mso 11]> <style type="text/css" data-inliner="ignore"> .mj-outlook-group-fix { width:100% !important; } </style> <![endif]--> <style>a:not([name]) {color:#000;text-decoration:underline} a:link {color:#000;text-decoration:underline} a:visited {color:#000;text-decoration:underline} a:active {color:#000;text-decoration:underline} a:hover {color:#000;text-decoration:underline}</style><style>#outlook a { padding: 0 } body { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } table, td { border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0 } img { border: 0; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic } p { display: block; margin: 13px 0 } @media only screen and (min-width: 480px) { .mj-column-per-100 { width: 100% !important; max-width: 100% } } .moz-text-html .mj-column-per-100 { width: 100% !important; max-width: 100% } @media only screen and (max-width: 480px) { div.kl-row.colstack div.kl-column { display: block !important; width: 100% !important } } @media only screen and (max-width: 480px) { .component-wrapper .mob-no-spc { padding-left: 0 !important; padding-right: 0 !important } } .kl-button a { display: block !important } img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; max-width: 100% } .root-container { background-repeat: repeat !important; background-size: auto !important; background-position: left top !important } .root-container-spacing { padding-top: 50px !important; padding-bottom: 20px !important; font-size: 0 !important } .content-padding { padding-left: 0 !important; padding-right: 0 !important } .content-padding.first { padding-top: 0 !important } .content-padding.last { padding-bottom: 0 !important } @media only screen and (max-width: 480px) { td.mobile-only { display: table-cell !important } div.mobile-only { display: block !important } table.mobile-only { display: table !important } .desktop-only { display: none !important } } @media only screen and (max-width: 480px) { .table-mobile-only { display: table-cell !important; max-height: none !important } .table-mobile-only.block { display: block !important } .table-mobile-only.inline-block { display: inline-block !important } .table-desktop-only { max-height: 0 !important; display: none !important; mso-hide: all !important; overflow: hidden !important } } p { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-bottom: 1em } @media only screen and (max-width: 480px) { body.mce-content-body, /* NOTE: needed for internal tinymce styles */.kl-text > div, .kl-table-subblock div, .kl-split-subblock > div { font-size: 14px !important; line-height: 1.3 !important } } h1 { color: #000; font-family: Helvetica, Arial; font-size: 40px; font-style: normal; font-weight: normal; line-height: 1.1; letter-spacing: 0; margin: 0; margin-bottom: 20px; text-align: left } @media only screen and (max-width: 480px) { h1 { font-size: 40px !important; line-height: 1.1 !important } } h2 { color: #000; font-family: Helvetica, Arial; font-size: 32px; font-style: normal; font-weight: bold; line-height: 1.1; letter-spacing: 0; margin: 0; margin-bottom: 16px; text-align: left } @media only screen and (max-width: 480px) { h2 { font-size: 32px !important; line-height: 1.1 !important } } h3 { color: #000; font-family: Helvetica, Arial; font-size: 24px; font-style: normal; font-weight: bold; line-height: 1.1; letter-spacing: 0; margin: 0; margin-bottom: 12px; text-align: left } @media only screen and (max-width: 480px) { h3 { font-size: 24px !important; line-height: 1.1 !important } } h4 { color: #000; font-family: Helvetica, Arial; font-size: 18px; font-style: normal; font-weight: 400; line-height: 1.1; letter-spacing: 0; margin: 0; margin-bottom: 9px; text-align: left } @media only screen and (max-width: 480px) { h4 { font-size: 18px !important; line-height: 1.1 !important } } @media only screen and (max-width: 480px) { .root-container { width: 100% !important } .root-container-spacing { padding: 10px !important } .content-padding { padding-left: 0 !important; padding-right: 0 !important } .content-padding.first { padding-top: 0 !important } .content-padding.last { padding-bottom: 0 !important } .kl-column > .component-wrapper { padding-left: 0 !important; padding-right: 0 !important; width: unset !important } .kl-text { padding-right: 18px !important; padding-left: 18px !important } }</style></head> <body style="word-spacing:normal;background-color:#f7f7f7;"> <div class="root-container" id="bodyTable" style="background-color:#f7f7f7;"> <div class="root-container-spacing"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-section" role="presentation" style="width:100%;"> <tbody> <tr> <td> <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="kl-section-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="margin:0px auto;max-width:600px;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:0px;text-align:center;"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]--> <div style="background:#ffffff;background-color:#ffffff;margin:0px auto;border-radius:0px 0px 0px 0px;max-width:600px;"> <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;border-radius:0px 0px 0px 0px;"> <tbody> <tr> <td style="direction:ltr;font-size:0px;padding:20px 0;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-align:center;"> <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><![endif]--> <div class="content-padding first last"> <!--[if true]><table border="0" cellpadding="0" cellspacing="0" width="600" style="width:600px;direction:ltr"><tr><![endif]--> <div class="kl-row colstack" style="display:table;table-layout:fixed;width:100%;"> <!--[if true]><td style="vertical-align:top;width:600px;"><![endif]--> <div class="kl-column" style="display:table-cell;vertical-align:top;width:100%;"> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="left" class="kl-text" style="font-size:0px;padding:0px;padding-top:50px;padding-right:30px;padding-bottom:10px;padding-left:30px;word-break:break-word;"> <div style="font-family:Helvetica, Arial;font-size:14px;font-style:normal;font-weight:400;letter-spacing:0px;line-height:1.3;text-align:left;color:#000000;"><p style="padding-bottom:0; text-align:center"><span style="font-size: 45px;"><strong>White Blackground</strong></span></p></div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:10px;padding-right:15px;padding-bottom:35px;padding-left:15px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="center" class="kl-button" style="font-size:0px;padding:0px;word-break:break-word;" vertical-align="middle"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;line-height:100%;"> <tr> <td align="center" bgcolor="rgba(0,0,0,1)" role="presentation" style="border:none;border-bottom:solid 2px #000000;border-left:solid 2px #000000;border-radius:1px;border-right:solid 2px #000000;border-top:solid 2px #000000;cursor:auto;font-style:normal;mso-padding-alt:15px 25px 15px 25px;background:rgba(0,0,0,1);" valign="middle"> <p style="padding-bottom:0; display:inline-block; background:rgba(0, 0, 0, 1); color:#FFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-style:normal; font-weight:700; line-height:100%; letter-spacing:0; margin:0; text-decoration:none; text-transform:none; padding:15px 25px 15px 25px; mso-padding-alt:0; border-radius:1px"> black CTA </p> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:10px;padding-right:15px;padding-bottom:35px;padding-left:15px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="center" class="kl-button" style="font-size:0px;padding:0px;word-break:break-word;" vertical-align="middle"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;line-height:100%;"> <tr> <td align="center" bgcolor="rgba(0,0,0,1)" role="presentation" style="border:none;border-radius:1px;cursor:auto;font-style:normal;mso-padding-alt:15px 25px 15px 25px;background:rgba(0,0,0,1);" valign="middle"> <p style="padding-bottom:0; display:inline-block; background:rgba(0, 0, 0, 1); color:#FFF; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-style:normal; font-weight:700; line-height:100%; letter-spacing:0; margin:0; text-decoration:none; text-transform:none; padding:15px 25px 15px 25px; mso-padding-alt:0; border-radius:1px"> black CTA no border </p> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:10px;padding-right:15px;padding-bottom:35px;padding-left:15px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="center" class="kl-button" style="font-size:0px;padding:0px;word-break:break-word;" vertical-align="middle"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;line-height:100%;"> <tr> <td align="center" bgcolor="#F0D1DF" role="presentation" style="border:none;border-bottom:solid 2px #F0D1DF;border-left:solid 2px #F0D1DF;border-radius:1px;border-right:solid 2px #F0D1DF;border-top:solid 2px #F0D1DF;cursor:auto;font-style:normal;mso-padding-alt:15px 25px 15px 25px;background:#F0D1DF;" valign="middle"> <p style="padding-bottom:0; display:inline-block; background:#F0D1DF; color:#000; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-style:normal; font-weight:700; line-height:100%; letter-spacing:0; margin:0; text-decoration:none; text-transform:none; padding:15px 25px 15px 25px; mso-padding-alt:0; border-radius:1px"> pink CTA </p> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <div class="mj-column-per-100 mj-outlook-group-fix component-wrapper" style="font-size:0px;text-align:left;direction:ltr;vertical-align:top;width:100%;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;" width="100%"> <tbody> <tr> <td class="" style="vertical-align:top;padding-top:10px;padding-right:15px;padding-bottom:35px;padding-left:15px;"> <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%"> <tbody> <tr> <td align="center" class="kl-button" style="font-size:0px;padding:0px;word-break:break-word;" vertical-align="middle"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:separate;line-height:100%;"> <tr> <td align="center" bgcolor="#FFFFFF" role="presentation" style="border:none;border-bottom:solid 2px #000000;border-left:solid 2px #000000;border-radius:1px;border-right:solid 2px #000000;border-top:solid 2px #000000;cursor:auto;font-style:normal;mso-padding-alt:15px 25px 15px 25px;background:#FFFFFF;" valign="middle"> <p style="padding-bottom:0; display:inline-block; background:#FFF; color:#000; font-family:Helvetica, Arial, sans-serif; font-size:16px; font-style:normal; font-weight:700; line-height:100%; letter-spacing:0; margin:0; text-decoration:none; text-transform:none; padding:15px 25px 15px 25px; mso-padding-alt:0; border-radius:1px"> color CTA </p> </td> </tr> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div> <!--[if true]></td><![endif]--> </div> <!--[if true]></tr></table><![endif]--> </div> <!--[if mso | IE]></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table></table><![endif]--> </td> </tr> </tbody> </table> </div> <!--[if mso | IE]></td></tr></table><![endif]--> </td> </tr> </tbody> </table> </div> </div> </body> </html>

      A
      Contributor IV
      Anh NguyenAuthor
      Contributor IV
      October 30, 2024

      Hi Arpit, I use drag n drop to create the button. Please find the HTML extracted above. Thank you!

        A
        Anonymous
        November 7, 2024

        I’ve also encountered this issue with the Klaviyo drag-and-drop button disappearing in my Outlook (app, online, and desktop app). 

        Klaviyo's chat escalated my issue. When I got a response, there were no additional resources besides the suggestion to use an image instead, but obviously, that’s not a great solution with many Outlook clients needing to allow images or “Trust sender” to see images. 

        I might be testing some of these options, but if Klaviyo doesn’t have a bulletproof drag-and-drop button and requires that I code my own… not a great tool. I hope it’s just a bug that gets fixed ASAP - we need buttons! 

        chloe.strange
        Community Manager
        chloe.strangeAnswer
        Community Manager
        November 22, 2024

        Hi there, 

        Following up here to summarize the situation. This is not a bug in our email template editor that could be triaged, but rather an issue in how Outlook renders HTML differently from other inbox providers (this guide provides more details on this). Specifically, from Outlook 2007 onwards, Microsoft stopped using Internet Explorer to render emails and instead opted to use Microsoft Word as its rendering engine. This creates a less than ideal environment for email marketers and developers who use HTML.

        As a workaround, you can design a button image using a site like Canva and upload it as an image block. You can then link the image using the same variable as the button. I hope this helps!

        ~Chloe

         

        A
        Anonymous
        November 22, 2024

        I’d recommend using a VML button since images - especially in Outlook - may not be turned on or viewable. Campaign Monitor has a helpful tool here: https://buttons.cm/. Hopefully we get a Klaviyo drag-and-drop button that works in outlook soon! 🙂

          Terms & ConditionsAccessibility statement

          Links & Resources

          Platforms

          Partners

          Useful Things

          About

          • Terms and Privacy |
            © 2026 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.