View Full Version : [CSS] PNG Based Buttons

08-08-2007, 10:55 PM
1) CODE TITLE: CSS PNG Based Buttons

2) AUTHOR NAME/NOTES: Dragos Stancu

3) DESCRIPTION: If you want to make your pages look sexier, you may think of using buttons that seem to blend with the background in a more 2007-ish manner. The approach I am suggesting is suitable for pretty much any browser, including the IE-s 5.5-6 that don't have native support for the .png format.

4) URL TO CODE: http://www.webfixtech.com/pngbutton.htm

08-08-2007, 11:27 PM
Poorly done. Use a thin image and stretch it; that way, the images are smaller and you don't have to depend on the user's text fitting inside a given pixel space. A non-breaking element around the whole thing wouldn't go amiss, either.

08-08-2007, 11:46 PM
will that work in IE5.5?

08-08-2007, 11:47 PM
Of course. Background images have been well-supported for a long time.

08-08-2007, 11:51 PM
you mean I should use a left, right and middle element and stretch only the middle background.

08-09-2007, 12:06 AM
'cause "background-repeat: repeat-x;" won't work; I am talking IE6, of course.

08-09-2007, 12:09 AM
you're probably talking jpg/gif; my purpose was to have blending background images; png files ...

08-09-2007, 12:16 AM
It doesn't matter, you can use sizingMethod=scale to the AlphaImageLoader filter for IE5-6.

08-09-2007, 12:20 AM
that's cool , thanks for the help

08-10-2007, 07:15 PM
I've changed the page so it reflects your suggestions.
It works, thanks a lot for the reply.