5 Replies Latest reply on Mar 4, 2016 11:10 AM by f4e8194e4dadc5cad621fbbce32d3583de9814ee

    Creating CSS buttons in Marketo

      Hey folks! This one seems like a no brainer, but my CSS button is not clickable when I send test. it works fine in the email preview mode for the email, but when I send the test, I am unable to click the button. Unfortunately, Marketo, doesn't have a CSS buttons for emails to use. Has anyone used CSS CTA in a Marketo template that works across multiple devices and browswers?

       

      Thanks,

       

      Christina

        • Re: Creating CSS buttons in Marketo
          Grégoire Michel

          Hi Christina,

           

          Probably linked to your email client. We always use CSS formatted <a> links for email CTAs, and they work fine.

           

          What's the code for your button?

           

          You may find this useful: A Guide to Bulletproof Buttons in Email Design - Litmus BlogLitmus Blog

           

          -Greg

          1 of 1 people found this helpful
            • Re: Creating CSS buttons in Marketo

              Hi there,

               

              Thanks for the reply. This this the code we are using inside our header for a signin button which is below. In the email preview template in marketo, it works, but it is not clickable in outlook on desktop or mobile or gmail. Oddly enough, I did refer to the litmus page above with trying to trouble shoot my buttons, but I am not a developer, and couldn't see what the difference was.

               

              However, if you can see the error, i can pass it on to my developer. We are trying to go live next week and all my template headers have these buttons now that do not work . needless to say, I'm anxious to find the solution. I will share this post with

              Donny Bereznak  to have him be aware of this thread also.

               

              <table align="left" cellpadding="0" cellspacing="0" border="0" class="column" style="width:325px;table-layout:fixed;" >

                <tr>

                <td class="std-pad-bottom gutter-half mobile-center" style="" >

                                <table cellpadding="0" cellspacing="0" border="0" style="width:100%;min-width:100%;" >

                <tr>

                <td align="right" class="contentContainer panel mobile-center" style="padding:25px; font-size:14px;color:#ffffff;line-height:1.42857;" >

              <div class="mktEditable" id="header-button"><a href="https://app.kabbage.com/Account/LogOn" name="Header_SignIn" ><div class="btn" style="max-width:150px;background-color:#17a9e1;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#fff;font-size:14px;text-align:center;padding:8px 0 6px;">Sign In</div></a></div></td>

                </tr>

                               </table>

               

               

              Thanks so much!

                • Re: Creating CSS buttons in Marketo
                  Grégoire Michel

                  Hi Christina,

                   

                  I would not set a <div> inside the <a>. I am afraid that this will not be recognized by some of the email clients.

                   

                  What we do for email HTML/CSS buttons that work well is that we set the div or the td with the button formatting and the <a> is inside it. The drawback is that only the "sign in" text woiuld be clickable, but at least, it works and anyhow, users seem to be used to this behavior.

                   

                  -Greg

                  • Re: Creating CSS buttons in Marketo
                    Dan Stevens

                    This is what we use:

                     

                    <table cellspacing="3" cellpadding="0" border="0">

                        <tr>

                          <td align="center" style="background-color:#056d91;

                          border:1px solid #056d91; color:#FFFFFF; font-weight:bold; white-space:nowrap;font-family: Arial, sans-serif;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:10px;">

                          <a class="button" href="#" target="_blank" style="color:#FFFFFF;

                          cursor:pointer; font-size:14px; text-align:center; text-decoration:none; vertical-align:baseline; font-weight:bold;font-family: Arial, sans-serif;">

                          <span style="color:#FFF; text-decoration:none;">SUBMIT</span></a>

                          </td>

                        </tr>

                    </table

                    1 of 1 people found this helpful