Submit button image changing color upon hover

[Anonymous]

I've changed my submit button to an uploaded image using the instructions here: http://community.marketo.com/MarketoArticle?id=kA050000000KysI

It's creating an issue where the entire image turns gray when I hover over it. Does anyone know where to fix this in the CSS, or the required code?

[Anonymous]

Does this happen on the live page or just in the editor?  I've seen cases where the editor doesn't render the button properly but the final version looks right.

[Anonymous]

Wondering if you can provide the preview link! It would be easier to find the solution. 🙂

[Anonymous]

It's happening on the live page. The link is http://info.anca.com/1MinuteEndmill if you'd like to inspect the source code.

[Anonymous]

Great, we've ruled out one possible cause.

Looking at the element in chrome, there is a computed style for the background of the button:


This is beyond my skillset to fix but I can offer two (hopefully) useful points:

• Marketo's sample images are larger than the button
• There is a CSS attribute called hover that changes the background when you hover over the image.  I can't find the specific line thats causing this, but its likely the source of the grey background

This should be enough information, at least, to take to your developer, or perhaps someone else in the community can offer a specific solution.

[Anonymous]

If you do not want any Hover action then DELETE:  (Line: 90,91) 

div.buttonSubmit:hover input { background-position: right -72px;}

div.buttonSubmit:hover span { background-position: left -108px;}

This should keep your "Watch Now" button same with no Hover action.

Hope this helps.
 

[Anonymous]

Thanks guys! It was indeed the hover attribute that was causing it to go gray. I deleted lines 90 and 91, and it's working perfectly now 🙂