Custom Submit button

June 3, 2004 by JJ Halans

This can easily be accomplished, by using input button and a source for your image, then add an onClick handler which does the form submit (and some additional actions like input validation for example). Or also use CSS, with a class, or inline as the following example:

<input type="button" name="submit" value="SubmitMe" OnClick="sendForm();return false;" style="background-image:url(my_button.gif); width:200px; height:23px; border:0; color:#036;font-family: Verdana; font-weight: bold;" />

Hope this helps

Custom Submit button #2

March 8, 2005 by Sergio Bonfiglio

The solution above is OK if you have to manage other events inside the oNclick event manager.

But if you don't, then a simpler form is quicker:

<input type="submit" value="SubmitMe"  style="background-image:url(my_button.gif); width:200px; height:23px; border:0; color:#036;font-family: Verdana; font-weight: bold;" />

Remeber to use the same dimensions of the gif file.

Border may be changed, as well as color and font: use them if you need to put the button in a very high accessible environment: someone may have images disabled. Experiment by yourself.

Enjoy.