Custom submit button issue

[Casler_Nancy__N]

I used the instructions on changing the standard submit button on a form to a custom button. It looks great, except that:

1) The left edge of the button is not showing

Is there a way to reveal that little bit of the left edge? I tried adjusting every value that made any sense to change, but nothing is doing the trick.

Also...

2) The hover state of my custom button is a light gray rectangle with white text. I tried adding a background-image to these hover styles (

div.buttonSubmit:hover input {  background-position: right -72px;} and/ordiv.buttonSubmit:hover span {  background-position: left -108px;} ), but that had no effect. Also tried giving those styles a background-color...no effect. So I followed someone's advice and removed those styles altogether...no effect. Still have a very light gray button on hover. Any suggestions on how to correct this?

[Anonymous]

Hi Nancy-
I just wanted to chime in and say that I have had this same issue before on certain forms and have never been able to figure out why....so would love to see if anyone in the community has some advice.

[Anonymous]

Same here. Would love to get an answer - eventually from a Marketo employee...

[Casler_Nancy__N]

I'm going to open a support ticket today to see if we can get some help with this.

[Anonymous]

Nancy-
Do keep us posted on what you hear from support!

[Casler_Nancy__N]

We did hear back from support:

"There are no responses to the provided Discussion article because Marketo Support does not support custom CSS. In order to edit or update the appearance of a submit button it requires custom CSS code to be implemented in a Custom HTML element or landing page template. Details can be found here:
"Change the Style of the Submit Button"
<http://community.marketo.com/MarketoArticle?id=kA050000000KysICAS>

That being said, I had a quick look to see if it was something simple that I could trouble shoot. I cloned your page here: "registration clone" <https://app-abm.marketo.com/#LP6904A1LA1> and modified the Custom HTML element called "css - submit button". It appears that all you need to do is edit the height property from 36px to 30 - 31px. If you having issues finding the element, you can copy the html code from the cloned asset to your page.
Thanks.

-Sean
Marketo Support"

I looked to see what he did; he seems to have added height to my button, which wasn't what I was looking for help with. I really needed more help revealing more of the width at the left edge. The other issue...the fact that the hover state is a light gray retangle with white text on it...was not addressed at all. I'll try again. It seems to me that if they're going to post instructions and drive users to them, they should work...even though they say they don't support custom CSS....

[Anonymous]

Hi Nancy,

I have been able to find out that Marketo buttons are using sliding door technique for hover over buttons. Therefore they insert only 1 image but containing the 2 states. Therefore when you add your own custom image and change the path in the html code, it is only displaying 1 image and the default over state (light gray).

Here are 2 options:

1. delete the hover over state line of code (Line 90 and 91:
div.buttonSubmit:hover input {  background-position: right -72px;}
div.buttonSubmit:hover span {  background-position: left -108px;}

2. Create an image sprites containing the 2 states.
You can use the Marketo buttons as a guide. Simply ask a designer to create their image respecting exactly the same height/width etc... Here there are
http://community.marketo.com/servlet/fileField?retURL=%2Fapex%2FMarketoArticle%3Fid%3DkA050000000KysICAS&entityId=ka050000000LMrAAAW&field=Add_File__Body__s

Upload this image in the Files and Images.
In your LP, insert the button html code, and simply change the path to link to your new image:  
background-image:url(/rs/mercer/images/your-custom-image.gif);

It will work. If you follow this, you will not have an issue with the left corner.

Hope that will help! I feel like celebrating 😉

[Anonymous]

Rozenn seems to have a more elegant solution, but this is how I got it to work after changing the button code in the landing page template. It was fiddly and obnoxious, but it works.

In your form editor, delete the "Submit" or whatever the default text is, and just start putting in spaces. My button is less than 100px wide and it took me about 15 spaces to get the whole thing to show up.