Neozilon Technology Blog

Set image as a submit button

Little tutorial of how to set an image as a submit button using css , you will learn how easy is to set it up , and how useful it can be , as I’m going to show you right now.

Ok, so lets cut to the chase.

For this tutorial we will use the tag <BUTTON> a very useful tag that we can customize as a SUBMIT or RESET button inside a FORM ,

we are gonna use this image for the example.

Here we have the HTML code for the image , that we are going to use.

<img width="80" src="http://neozilon.com/wp-content/uploads/2008/04/adidas-soccer-ball.thumbnail.jpg"  />

Now what we need to do is put this code between the <button> tag, so lets do that.

<button>
<img width="80" src="http://neozilon.com/wp-content/uploads/2008/04/adidas-soccer-ball.thumbnail.jpg"  />
</button>

and here is the result for the code we have just written.

But as you can see , there is some border that ir covering our image, and that doesn’t look to good, so we need to fix this little problem, and we are going to use a simple CSS to solve the problem

   style="margin: 0px; background-color: transparent; border: none;"

and now appling the style to the tag button we can see the result

As you can see, now we have the result we were looking for, so I hope this little trick will be useful to you, and feel free to leave any comments about the script.

And here is all the html and css used in this little tutorial , that can save you some time, and is very useful in many situations.

<button style="margin: 0px; background-color: transparent; border: none;">
<img width="80" src="http://neozilon.com/wp-content/uploads/2008/04/adidas-soccer-ball.thumbnail.jpg"  />
</button>

So, I will see you next time, have a nice day.