how to change the submit button appearance?

Question

I have this plain submit button appearance in my html code

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

I wish to make the submit button look like this

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

but should stick with its submit type

how to do that ?

Answer 1

You should use CSS for that:

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

You should probably use a more specific selector though.

Answer 2

A nice way to do this is using the button element.

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

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

Answer 3

You can make an image into a 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 Button State section of the HTML specification.