Can I use a csssprite on a submit button

Question

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 have 5 buttons on the page

The problem is that I want to avoid javascript for buttons, and therefore I need to use an input field of type image. I can set the background image on this field just as i would for any csssprite.

The problem is that I found I had to set the image source to an empty pixel or else I get a broken image icon.

With that said, this is the best solution I have come up with :

<style>
    .csssprite_cat {
     background-image:url(http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg); width: 50px;
     height: 50px;
    }
</style>

<input type=image src="http://www.grasse-ac.com/gif/no_pixel.gif" class="csssprite_cat">
<input type=image class="csssprite_cat">

(You can just load this file directly into a browser - i am borrowing images from a random site).

It works kind of OK, but I have to use our good old friend pixel.gif. Very nostalgic!

There probably isn't a better way without javascript, unless there is a way in css to hide the broken image text and icon.

Answer 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:

<input type="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: 0 25px; }

Answer 2

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

<button><img src="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.