CODEWITHSUNDEEP
htmlcss
sasori
sasori

Reputation: 5445

how to change the submit button appearance?

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 ?

Upvotes: 9

Views: 41450

Answers (3)

Roel
Roel

Reputation: 326

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.

Upvotes: 7

0b10011
0b10011

Reputation: 18785

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.

Upvotes: 3

Joseph Silber
Joseph Silber

Reputation: 219930

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.

Upvotes: 8

Related Questions