How to use an image as a submit button

Posted on September 24, 2008, Filled under HTML & CSS,  Bookmark it

Thanks for visiting our website! We regularly publish posts like this one. If you are interested in receiving the latest updates as soon as they are posted, please consider subscribing to the RSS feed or to our e-mail newsletter.

Greetings,

The classical submit buttons aren’t always the best choice for a form’s design. The need customized or replaced with images. In this short tutorial you will see how a submit button can be replaced with an image.

A standard submit button HTML Code will look something like this:

<input type="submit" name="submit" value="Submit">

Here’s a code that uses an image as a submit button:

<input type="image" src="http://www.yoursite.com/images/myimage.gif">

As you can see, the SRC attribute has been added containing the URL address of the image and the TYPE’s value was changed to ‘image’.

Good luck!

Do you wish to receive the latest updates as soon as they are posted? Get our RSS Feed or Subscribe to the Newsletter!

Get our RSS Feed!

Sponsors

2 Replies to "How to use an image as a submit button"

  1. Thanks Gabriel, its suprisingly simple, i was expecting more.

    I must admit the standard look button is very boring looking, its amazing how these little changes here and there can make a real difference overall.

    1. @Webhostright, at the time I wrote this post (last year) I was thinking that someone may need this, although it’s very simple.

Leave a Reply


* = required fields

(will not be published)


XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


  

CommentLuv Enabled