Graphic/Web Design Blog


A great resource for web and graphic design for beginner and advanced designers. Learn about Adobe Software, XHTML, CSS and PHP coding, Design Jargon and other resources to help you.

Replacing a Submit Button with an Image

Images can be used to replace the old boring gray submit buttons, and it can even be done with one line of html code!

Lets look at the html code for a gray submit button:

<input type=”submit” value=”submit”>

That code looks like this:

Which visually can be quite boring and very amateur design-wise. To swap that button out for an image use this line of code instead:

<input type=”image” src=”pathtoimage/imagename.jpg”>

The text after src would be the path to the image you want to use. This is what our form looks like now:

With a little CSS (Cascading Style Sheets), you can change the size of the image and the spacing between the text box and image.

Share and Enjoy:
  • Digg
  • Design Float
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • E-mail this story to a friend!
  • Furl
  • LinkedIn
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati
  • TwitThis

Tags: , , , ,


2 Responses to “Replacing a Submit Button with an Image”

  1. Brin Says:

    Hello, nice site :)

  2. Wise Jargon. | 7Wins.eu Says:

    [...]       Sites you may be interested in ? Replacing a Submit Button with an Image | Blog Archive | Designs by Calvin BlogWhy Business Fails at Social Stuff: Part 3 | The Relationship Economy…… ? Book Review: Death [...]

Leave a Reply