Separate button CSS for forms

[Bainn]

Hi all,

Wondering if you can please help me...

I need my form submit button to look different to other buttons. I've edited CSS, but don't know how to do this in such a way as to edit a specific button within a form, as opposed to a regular button.

Can this be done? If so, how?

Any information you can provide would be greatly appreciated. Thanks.

[Queso]

Hey there! To clarify, you're looking for a button that would be specific to a specific form, or just forms in general?

[Bainn]

Either, or. The trouble I'm having is they share the same class to regular buttons. Thanks!

[BJ5]

Try adding more specific CSS rules. For example, if you're using this right now:

.button-class
{
background:#EFEFEF;
}

Try something along these lines:

form.form-class .button-class
{
background:#EFEFEF;
}

I'm sure the parent containers of forms have some classes of their own, so you can keep it specific to only buttons within forms.

[Bainn]

Thanks - I'll give this a try and let you know how I go.

[Bainn]

I gave this a try, but couldn't get this to work. Here's the page (refer contact form in the lower half of the page)

http://www.faithcentre.co.nz/contact.html

Thanks again for your help.

[Inpress]

Hey I had the same problem with my site, and managed to get hold of this code which has seemed to work a treat. It just edits the button on the form and no others. 

This is how it turned out on my site.

Hope this goes well for you 

}

form .wsite-form-button {
	background: #f06b1e none repeat scroll 0 0 !important;
    border: 0 none;
    box-shadow: 0 1px 2px -1px #999 !important;
    margin: 20px 0 40px !important;
    padding: 15px 45px !important;
}