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
Hey
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
<!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>
Hi Arpit, I use drag n drop to create the button. Please find the HTML extracted above. Thank you!
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!
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
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! 
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.