Creating CSS buttons in Marketo | Community
Skip to main content
A
Anonymous
March 4, 2016
Question

Creating CSS buttons in Marketo

  • March 4, 2016
  • 1 reply
  • 3758 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Grégoire_Miche2
Grégoire_Miche2
Level 10
March 4, 2016

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

    A
    Anonymous
    March 4, 2016

    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="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!

    Grégoire_Miche2
    Grégoire_Miche2
    Level 10
    March 4, 2016

    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

    Terms & ConditionsAccessibility statement

    Loading footer...