CSS to Change the Button on the Form

[Tom_Kerlin2]

Hi all,

Does anybody have the CSS code that's required to customize the button on the form? I currently use one of the out-of-the-box options and I can change the button's color, but if there is a way to edit the button so that it closely mirrors the button on our website I'd like to try it. I like the options Marketo offers, but sometimes (depending on the style you select) the button's color changes when you hover over it. I'd just like to know the basic code needed to change the button's size and font-style/family/border-color so that it resembles our website a bit more.

I checked past communities posts but many of the links to supporting articles were broken.

Thanks, Tom

[Tom_Kerlin2]

I think the CSS would need to be on the .mktoButton object.

[Frank_Breen2 · Accepted solution]

The way I would do this is Edit Custom CSS (Edit the CSS of a Form Theme - Marketo Docs - Product Docs), then insert the code below:

.mktoForm .mktoButtonWrap.mktoDownloadButton .mktoButton {

    color: #FFFFFF !important;

    width: 205px !important;

    background: #3899f4 !important;

    background: -webkit-gradient(linear, left top, left bottom, from(#3899f4), to(#055aaa)) !important;

    background: -moz-linear-gradient(top, #3899f4, #055aaa) !important;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3899f4', endColorstr='#055aaa') !important;

    -webkit-border-radius: 3px !important;

    -moz-border-radius: 3px !important;

    border-radius: 3px !important;

    font-size: 16px !important;

    font-style: italic !important;

    font-weight: 100 !important;

    -webkit-box-sizing: border-box !important;

    -moz-box-sizing: border-box !important;

    box-sizing: border-box !important;

    border: 0 !important;

    padding: 2px !important;

    text-align: center !important;

}

I used !important to make sure my code override Marketo's code, you may want to experiment, this is how I wanted my button to look, you can custom yours to what your website looks like. Basically I took what Marketo had for it's button CSS and custom it like above, remember each button has it's own name (shown as a class), i.e. My blue button has a class of: mktoDownloadButton, to find your name, look for <span class="mktoButtonWrap mktoXXX", mktoXXX is the button class.

[Grégoire_Miche2]

Hi Frank,

The code is good, but most of the time, I would rather integrate it in the landing page template, so that:

1. All buttons appear the same on all LP's
2. It does not depends on user to set it up at the form, it's automatically added by the LP template.

The same applies for embedded forms, only you have to set that CSS on the site.

-Greg

[Frank_Breen2]

Sorry Greg, my approach is a bit of a hack sometimes. Tom, please do as Greg says, put it in the template rather than just on the form itself. Happy coding.

[Tom_Kerlin2]

Thanks Greg,

Is it possible to upload our own custom buttons to the form?

[Grégoire_Miche2]

Hi Tom,

You cannot "upload" a button in Marketo forms 2.0 editor. By uploading, you probably mean using an image button ?

Image button, are not necessarily the best approach. Remember that a significant share of email clients do not download images by default.

CSS styling would enable you do to very sophisticated things, additionally.

-Greg