Web 2.0 Style Buttons

Step 1

Make a circular shape, filled with a nice, bright color:

Step 2

Apply the following layer-styles to this new shape (double-click on a layer in the layerview):

If you did this right you get something similar to this:

Step 3

Make a new layer above the shap you just made. Select the circle (Ctrl+click on the thumbnail in the layer with the circle, while you keep the new layer selected in the layerview) and fill this layer with white (Alt+backspace).

Step 4

Select a part of this white cirkle as shown on the next image. Do this with the circular selection tool. Delete the selected part of the white circle (delete). The result is as shown next.

Step 5

Apply an opacity of 33% on this layer:

All the previous will result in the next image:

Step 6

Choose a fancy web 2.0 style font (in this case Helvetic Rounded) and type a digit or a letter or something:

Step 7

Apply the following layerstyle to this character:

And finally all this results in the follwoing:

Copy the layers and change the color of the circle to vary the button: