9

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 ?

Joseph Silber
221k59 gold badges369 silver badges293 bronze badges
asked Jan 11, 2012 at 6:00
2

3 Answers 3

8

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.

answered Jan 11, 2012 at 6:01
Sign up to request clarification or add additional context in comments.

3 Comments

customizing submit button via css is not a good option since its not cross browser..
@GauravShah: Erm, what browser are you using that doesn't support CSS?
I don't mean to say that browser doesn't support css.. what I mean is say you have disabled button , try customizing and opening in IE , Chrome and safari and see the difference..
7

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.

answered Jan 28, 2012 at 14:48

Comments

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.

answered Jan 12, 2012 at 20:41

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.