Submit With Style - CSS-Tricks

Submit With Style

By: Chris Coyier on October 2nd, 2007 — Posted in: Freebie, Quick Tip / Trick

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.

[DOWNLOAD EXAMPLE]

Theoretically Related Articles:

Discussion Elsewhere

Style » Submit With Style — October 2, 2007
Criando bot — October 3, 2007

Responses

1

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

Comment by Chcopunk — October 2, 2007 @ 10:45 pm
2

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

Comment by Chris Coyier — October 3, 2007 @ 5:32 am
3

Very, very Interesting!!!

Comment by hebertphp — October 3, 2007 @ 12:24 pm

Leave a comment

Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.