Image on button | Image instead of button | No image
[Note: code below is XHTML.]
Experiments in button design. If you wish to use the default button style and provide an image that sits on top of the form button, rather than absolutely replacing it, you can do this:
HTML:
<button type="submit" name="submit" value="Submit"><img src="formbutton.gif" width="40" height="40" />Submit</button> <button type="reset" name="clear" value="Clear"><img src="formbuttonclear.gif" width="40" height="40" />Clear</button>
I also made the button font bold in the page head's CSS:
<style type="text/css">
<!--
button {
font-weight: bold;
}
-->
</style>
So much for that experiment. If you want to use your image, and only your image, this is better:
Limitation: input type="image" is automatically a submit button. You cannot have a reset ("clear") button.
Here's the code for the above submit button:
<input type="image" src="formbuttonsolo.gif" alt="submit button" />
Want that form button to change on hover?
The code now looks like*:
<input type="image" src="formbuttonsolo.gif" onmouseover="this.src='formbuttonsolohover.gif'" onmouseout="this.src='formbuttonsolo.gif'" alt="submit button" />
*Many thanks to Gary White of apptools.com for giving me the onmouseover/onmouseout code to get this right.
Of course, you don't need images at all to style your submit button:
In the case of the above, I have employed this CSS:
input.noimage {
background-color: #006;
border: 2px outset #03f;
color: #fff;
padding: 4px;
margin-left: 2px;
}
input.noimage:hover {
background-color: #0cf;
border: 2px outset #03f;
color: #fff;
padding: 4px;
margin-left: 2px;
}
And the input code in the HTML:
<input type="submit" class="noimage" value="submit">
Note: because Internet Explorer (through version 6) only supports the CSS :hover property on the <a> tag (links), it will not render the hover in the above example.