How to change the appearance of the submit button?

Question

I have this simple representation of a submit button in my html code

<input type="submit" name="pay now" value="pay" /> 

I want the submit button to look like this:

 <a href="#"><img src="images/shopping-cart/check-out-btn.png" border="0" /></a> 

but must adhere to its type of dispatch

how to do it?

Answer 1

You must use CSS for this:

 input[type="submit"] { background: url(images/shopping-cart/check-out-btn.png); width: 200px; /* width of image */ height: 50px; /* height of image */ border: 0; } 

However, you should probably use a more specific selector.

Answer 2

A good way to do this is to use a button element.

 <button type="submit"><img src="images/shopping-cart/check-out-btn.png" border="0" /></button> 

It works just like regular input with type = submit, but you have much more freedom.

Answer 3

You can make the image into the submit button by setting the type attribute of the input element to image :

 <input type="image" src="/path/to/image.png"> 

For more information, read the image section of the state of an HTML specification element .