Grow your CSS skills. Land your dream job.

Submit With Style

Published by Chris Coyier

submit-buttons.gif

This is how you create a super basic submit button:

<input type="button" value="Submit" />

All you need to do to replace this default button with an image is to change the type to image and then declare a source image like this:

<input type="image" value="Submit" src="submit-1.gif" />

You are also able to add a class declaration if you wish to further style it (e.g. floats, borders, etc.).

I have made up an example page with a bunch of example submit buttons. Also feel free to download the example page and do with it what you will.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

Comments

  1. Chcopunk
    Permalink to comment#

    Interesting, i used to give the input a class with a background image, but this looks more simple.

  2. I bet there is something interesting you could accomplish by using BOTH an inline image and a background image…

  3. Very, very Interesting!!!

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".