How can I change the "roll-over" color of a button in a form?

Anonymous
Not applicable

How can I change the "roll-over" color of a button in a form?

Hello all,

I know how to change the first color of a button, but not the "roll-over" color (when the cursor is over the button).

The button I chose is the following one, and I would like the second color to be grey instead of purple:

pastedImage_1.png

Any help?

Thanks a lot,

Margaux

Tags (2)
4 REPLIES 4
Grégoire_Miche2
Level 10

Re: How can I change the "roll-over" color of a button in a form?

Hi Margaux,

This will take some CSS.

Edit the form, go to the form them section, clixk the wheel pastedImage_0.png on the right and select "Edit custom CSS".

you will need a CSS entry such as

    .mktoForm .mktoButtonWrap .mktoButton:hover {

  background-color: #c2c2C2 !important;

    }

Bien cordialement,

Grégoire

Anonymous
Not applicable

Re: How can I change the "roll-over" color of a button in a form?

Try this:

<a href="#"><img src="button1.png" onmouseover="this.src='button2.png'" onmouseout="this.src='button1.png'" /></a>

Grégoire_Miche2
Level 10

Re: How can I change the "roll-over" color of a button in a form?

Hi Lea,

YOur approach would work for a CTA in an email, but not for a form submit button. You canot change the HTML code of a Marketo form button.

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: How can I change the "roll-over" color of a button in a form?

Well, I wouldn't say you cannot, but you should not.  It's better to work on restyling the form than actually changing the form DOM.  Though I've been known to do the latter if necesssary.  

Anyway, changing out the INPUT[type=submit] for an A would never be advisable.  A BUTTON is more semantically accurate, reacts more interactively ("button pressed" state), and is just as functional.