I know but cannot remember!

[sunny]

hi there,
I know this but cannot remember.my problem is, i wanat to color the button appearing on the form (not an image, an actual SUBMIT BUTTON) on my site.I know that this can be done with some thing like -STYLE.THIS.BUTTON. .....
Can anyone tell me what is the proper code for coloring the button or a source from where i can get a few examples for this.

[jscheuer1]

It depends upon when you want to color the button. One of the most straight forward methods would be:

<input type="submit" value="Submit" style="color:white;background:black;">

Notice I have specified a color as well as a background, this is to insure that the text is legible. You never know what color (if any) a user may have his/her foreground color set to. In this case a user foreground of black would make the text on this button invisible except for the fact that I have specified white.

[mwinter]

Don't necessarily expect the styling of form controls to work. If the user agent relies on the operating system to provide UI widgets, it may be unable to specify how they look.

Mike

[sunny]

If the user agent relies on the operating system to provide UI widgets, it may be unable to specify how they look.

What do you mean by:User agent relies on the operating system UI widgets.

[jscheuer1]

He means the browser. Don't worry about it unless you have alot of 'nix (Unix and its clones, etc.) folks viewing your site or are concerned that some folks (maybe Safari users) will see a default button.

[mwinter]

What do you mean by:User agent relies on the operating system UI widgets.

Some user agents (browsers) don't draw controls (User Interface widgets) themselves. Instead, they get the operating system to do it for them. Depending on the OS involved, you may have little ability to affect how the resulting control looks.

Don't worry about it unless you have alot of 'nix (Unix and its clones, etc.) folks viewing your site or are concerned that some folks (maybe Safari users) will see a default button.

I was referring to all platforms. Really rudimentary changes to some control types won't be a problem. However, only browsers which draw controls themselves (like Opera) will be truly flexible over a wide range of CSS properties. It was a general warning so that the OP doesn't come back later asking why doing X to control Y doesn't work.

Mike

[sunny]

OK,
Last query regarding this problem.
I tried 'hover' code for the button but it doesn't work the code goes like this:

<style>
.button{background:blue;color:white}
.button:hover{background:black;color:red}
</style>

AND

<form>
<input class="button" type="submit" value="Submit Form">
<input class="button" type="reset" value="Reset Form">
</form>

I would like to ask whether use of 'hover' is possible with button or not.
And thanks for answering all the way long.

[mwinter]

.button{background:blue;color:white}
.button:hover{background:black;color:red}

[...]

I would like to ask whether use of 'hover' is possible with button or not.

Of course it is possible, however IE won't support it - others will. You'll need to script an additional substitute (using onmouseover/out) if you really want the feature for IE.

Mike

[sunny]

Does It Mean That i'll have to specify a function for mouseover/out and link it to images and substitute these (form) buttons with those mouse over/out images.
Is it possible to have these (form) buttons as well as mouseoover/out images Simultaneously.Or is it possible to have a mouseover function to change the color of the button .If yes, please Do write it as i have forgotten .I know that it's simple one.

[mwinter]

Does It Mean That i'll have to specify a function for mouseover/out

Yes.

and link it to images and substitute these (form) buttons with those mouse over/out images.

No, not at all. The functions will just alter the CSS rule that applies to the button.

function setColours(object, foreground, background) {
  var style;

  if((style = object.style)) {
    if('string' == typeof foreground) {style.color = foreground;}
    if('string' == typeof background) {style.backgroundColor = background;}
  }
}

<input class="button" type="submit" value="Submit Form"
 onmouseover="setColours(this, 'red', 'black');"
 onmouseout="setColours(this, '', '');">

The first call that occurs with the mouseover event sets the foreground ('red') and background ('black') colours through the inline style object, overriding the values supplied by the style sheet. The second call that occurs with the mouseout event sets empty strings for both colours. This effectively removes the overrides, allowing the original colours to be used.

Mike