Can I Use A Csssprite On A Submit Button

I have two reasons I want to use csssprites for submit buttons : I have dynamically created button, which in the future might be localized I want just 1 HTTP request even if I hav

Solution 1:

Don't use the image input type, you're much better off using a bog standard submit button and styling it that way.

Once you have defined your background-image, you'll need to define unique background-positions for each different button you'd like to use.

For backwards compatibility I would advise using class mixtures (since as of now IE still doesn't support CSS3 attribute selectors), like so:

<inputtype="submit"class="submit uniqueButtonClass" value="Submit" />

If you give the .submit class the background-image property, you can set the background-position property independently for each individual button, and avoid having to repeat yourself several times.

Example:

.submit { background-image: url(path/to/image.png); width: 50px; height: 25px; border: 0; }
/* assuming 25px is the offset you're using */.uniqueButtonClass { background-position: 025px; }

Solution 2:

I would use either a input type as above, or you could also:

<button><imgsrc="http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg" /></button>

The button tag allows you to pretty much throw anything in it, and allow for greater control on formating.

In this case you could style a span inside the button or the button it's self.