HTML Tutorials

Custom Submit button

Turn those ugly submit buttons into an image of your choice! Its easy...
1
Did you know you can change those grey submit buttons into anything you want?
Its very easy to do as well, here is how:



As you can see this one is bulky, chunky and ugly, bit like yourself, but wait there's hope ;P

Change:
<input type="submit" name="Submit" value="Search">

Into:
<input type="image" src="search.gif" name="Submit" value="Search" width="64" height="18" alt="Search the site">

You must make sure the src="search.gif" is pointing to the source of the image you want to use.
2
Grab the code:
If you are too lazy to type all of that out then you can just copy it from the textbox below:


3
That's about it, remember you can edit the alt tag too so it displays a tooltip.

Combine the textbox tutorial with this one and you can get some great looking forms. To learn how to create the image button I created (search.gif) simply click here.

Hope you enjoyed the tutorial, no more chunky submit buttons, whey!
This tutorial was brought to you by Robouk, please post any questions in the forum. Thank you.
BACK TO TUTORIALS