In this article I’ll show you how to make beautiful buttons to use these on your web pages using best practices. These buttons are:

• Use only one picture for all states
• Has a 3 states: the state of rest, when you hover the mouse and when clicked.
• Having less of css code.
• Can be easily embeded into any place of your web pages.
• The text on the button is just text, not image.
• Buttons can be of any width.

As a result, we have got these buttons:

Let’s begin

First, we need to draw those buttons. Open Photoshop and create a new document:

Then, using the Rectangular Marquee Tool select a fixed area, as shown in the picture:

Once you’ve selected so we get this:

Then, create a new layer and fill it with black. Further, we only adjust Layer Blending Options and set it up properly. I specifically gave you an example of just started creating buttons, because then everything utterly banal.
You can download complete psd source, to see what settings I applied to the buttons.

Next

Now, when the buttons are drawn, we can only create a png-file with the buttons, as well as html-markup and css-code. Again, I will not explain everything step by step, as the comments in the file with an example should be sufficient in abundance. Let’s enjoy the result of:

Click to view online demo

Important! My example uses a button with a semitransparent shadow and rounded corners. Naturally, in the png format. As you know, IE6 does not support alpha channel in png, therefore, we are forced to use a “crutch”. In my example, there is no such any “crutch”. But if you want support for alpha channel in IE6, I strongly recommend you use DD BelatedPNG, is the best solution to date.

So, as you can see, we got quite a good buttons:) I hope you enjoyed this article.

Now you can:

• View online demo
• Download psd source
• Download demo in zip
• Read about how you can draw buttons in photoshop
• Support for alpha channel in png in IE6 (best solution to date)

Also interesting

• Делаем красивые кнопки с использованием лучших практик