CSS to Change the Button on the Form | Community
Skip to main content
T
Tom_Kerlin2
New Participant
February 24, 2016
Solved

CSS to Change the Button on the Form

  • February 24, 2016
  • 1 reply
  • 8372 views

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

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

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.

1 reply

T
Tom_Kerlin2Author
New Participant
February 24, 2016

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

Tom Kerlin
Frank_Breen2
Frank_Breen2Accepted solution
New Participant
February 24, 2016

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
    Grégoire_Miche2
    New Participant
    February 24, 2016

    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

      Terms & ConditionsAccessibility statement

      Loading footer...