posted on Jun, 29 2009 @ 05:17 PM
I wonder if this is what he is asking about. I create buttons with .css and .pngs all the time. The advantage to it is that I can completely
change how the button looks with a small edit of .css. Color, text fonts and so on.
Ok, you are going to need a good paint editing program. You can download PSP on a 30 day trial for free probably. I use it instead of photoshop,
but I just make buttons and do what I'm about to tell you. I think it's like $50 for a paid copy. This works in photoshop too.
Open up the program. Create a new layer. Use the fill tool, and fill it up with whatever color button you want.
Add a new layer. Add a vertical reverse gradiant to this layer. It should have the white at the top, darker color at the bottom. Set the
transparency of this layer to between 10 and 30% depending on the definition you want.
Add a new layer on top of this. At the top of this layer, add a single white horizontal line. At the bottom, add a single black line. Set
transparency between 80 and 100%.
Now you have a basic button. You can fill the first layer with any color now to see how it looks in different colors etc.
Now, turn off visibility on the first fill layer with the color. Flatten/Merge all layers, so it's a single layer. You should only see the
"shadows" of the button now with the fill layer gone. Select 100% of the height, but only 1 pixel wide. Copy and paste as new image. Save the
new image as a transparent .png.
Save it as a transparent .png file. Upload it or whatever.
Now, open up the html file etc. Where you want the button, make 2 divs, and give each of them their own class. Put the text of the button in the
inner most div.
Open up the .css file. Create the 2 classes. In the first class, add a background-color line. This will be the actual color of the button on the
page. Add your font settings and so forth.
In the 2nd class, put in a background-image: with the newly created .png file. Also, set in a repeat-x line to make it repeat the image over and
Upload it all, and you should have a button which you can change the looks of completely with a simple edit of the .css file. You can also create
many templates and buttons without actually creating a bunch of images, it will all be built using that really small image.
You can also add a :hover to the 1st div, and then change the background color and you get an instant mouseover hover that looks just like the image
swap stuff, but actually isn't, still using the 1 image. This only works on newer browsers, but you can use the :hover for the text color and it
will work on a few older browsers, just not the background part.
If you want to add splitters that seperate the buttons, then just create an image that 2 pixels wide, and 1 pixel wide. Then create a div between
the buttons, give it a class and do the image-background thing on that div. Add both repeat-x and repeat-y and a width of 2px, and height the same as
the other buttons.
And then you have a .png/.css button. But it is not converting a .png button into css. The most basic button you can make in .css is to just
create a div, and set a border to 1 solid.