how to set background image in submit button?

I have to use a image in place of regular submit button? which way would be best in xhtml/css?

Button should look same in all main browsers including IE6,IE7

5 Answers

The way I usually do it, is with the following css:

div#submitForm input { background: url("../images/buttonbg.png") no-repeat scroll 0 0 transparent; color: #000000; cursor: pointer; font-weight: bold; height: 20px; padding-bottom: 2px; width: 75px;
}

and the markup:

<div> <input type="submit" value="Submit" name="submit">
</div>

If things look different in the various browsers I implore you to use a reset style sheet which sets all margins, padding and maybe even borders to zero.

1

.button { border: none; background: url('/forms/up.png') no-repeat top left; padding: 2px 8px;
}

Typically one would use one (or more) image tags, maybe in combination with setting div background images in css to act as the submit button. The actual submit would be done in javascript on the click event.

A tutorial on the subject.

i do it like this cover button and the middle image that

<button><img src="foldername/imagename" width="30px" height= "30px"></button>

You can try the following code:

background-image:url('url of your image') 10px 10px no-repeat

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy