Can I club together three images to form a one with CSS? Basically, I need to create rounded corner button and I've three images left, middle and right.
I've used in all the pages and it won't be possible for me to replace it with two or three other HTML controls. So is there any way by which I can combine these images to form one and apply that CSS class to asp:button?
Please don't suggest for border-radius properties as backward support is important here. Thanks in advance
The best way would be to modify the HTML for your button. Something like this works well:
<button><span>Click Me!</span></button>
One way I can think of is to inject the <span> into the <button> with javascript after the page has loaded.
Then you CSS that you will need for the <button> and the <span> will do the background images. You may not need 3 images, 2 should suffice, one would be the left end for eg. and another would be a really long right end. Using the sliding doors technique you can make a rounded corner <button>
You could even do this with 1 image, a sprite containing the two images I mentioned above.
This article is excellent: http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/
Read Sliding door technique
http://www.alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
To create rounded buttons and a lot more using two sliding images from left and right.