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
Tags: alpha-channel, css buttons, photoshop, png, pretty buttons, web2.0 buttons
I noticed that when you click on a button the color remains dark. How can I modify your css so that when I click (and release the button) it goes back to the original color?
If you click on the button and then release the button is focused now. You need remove “a.btn:focus” selector from this style:
a.btn:hover,a.btn:focus {
background-position: right -72px;
color: #fff;
text-shadow: 0 -1px 1px #555;
}
Simple and helful. Thanks