Using an image as a submit button

Question

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

Sign up

Where CSS rule

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

<button id="bar" type="submit"><img src="foo.img" /></button>

this creates a submit button with an image inside.

and if you want to change the cursor when you mouseover the cursor use this css.

button#bar:hover{cursor:pointer}

Answer 3

It's easy enough, to use an <input type="submit" />:

input[type=submit] {
    background: transparent url("path/to/image.jpg") 0 0 no-repeat;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    height: 331px; /* height of the background image */
    width: 500px; /* width of the background image */
    border: 5px solid #fff;
    border-radius: 4em;
}

JS Fiddle demo.

Answer 4

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