Using an image as a submit button

Question

If I want to make my own clickable buttons, I can do this:

<a href="javascript:;" class="button">Sign up</a>

Where CSS rules for a.button causes the link to be shown as a button. If I apply the same trick to <input type="submit" />, I get the button image but it is shown on top of the default submit button and the cursor doesn't change to a hand like it does on <a> tags.

How can I fix this behavior?

Answer 1

You can use appropriate CSS properties such as

border: none;
background: transparent;
cursor: pointer;

to remove the default styles from your input type="submit" button.

Answer 2

You could use an input type="image" instead.

It is used like this:

<input type="image" src="{your image}" alt="{alternate text}" />

• input type="image" on MSDN
• input on MDN