Creating CSS buttons in Marketo

[Anonymous]

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

[Grégoire_Miche2]

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

[Anonymous]

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!

[Grégoire_Miche2]

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

[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

[Anonymous]

Thanks guys. The litmus border button code worked pretty well. We are just needing to find a way to keep the div containers around the table because this area needs to remain editable.

Thanks,