Web 2.0 Button

Open a new document in photoshop

Size should be 400 x 400 pixel ( so you can have enough space )

Background : White

Create a new layer ( press Ctrl+Shift+Alt+N )

Select Elliptical Marquee Tool, Use the following settings:

Then create a new selection on your canvas

Select Paint Bucket Tool, Change the foreground color to a dark color, and press one time with the mouse pointer inside your selection

Press on Ctrl+D to deselect

Now create another layer ( Press Ctrl+Shift+Alt+N )

Select One more time Elliptical Marquee Tool, this time be sure you will use the following settings:

Then make another selection

Select Paint Bucket Tool, and fill this second circle with the same color. Then press on Ctrl+D to deselect

Select all the layers except background layer

Select Move tool and align the circles. press on the button marked with red from the next image " Align vertical centers "

Create a new layer ( press Ctrl+Shift+Alt+N )

Select rectangular marquee tool, and use the following settings:

Then place the selection like in the next image

Select Paint Bucket Tool , and fill the selection with the same color

Then press on Ctrl+D to deselect

Select Move Tool, And go to Edit > Transform > Perspective and drag the right top corner of the rectangle shape until you will meet the circle

When you are happy with the result you can press Enter. This is my result

Select All the layers except the background layer and press Ctrl+E 9 this will merge all the layers into a single one )

Now you can add some layer styles for this shape

This will be the result

Be sure you have selected this layer, then go to Select > Load selection

A new window will appear. press Ok

You will see that you will have selected the button

Now grab Elliptical Marquee Tool ( fixed size 60 x 60 pixels ) and press on Subtract from selection button

Then make a selection like in the following image

After you will release the mouse button you will get this

Then go to Select > Modify > Contract ( choose contract to 3 pixels and press OK)

Create a new layer ( press Ctrl+Shift+Alt+N )

Select Paint Bucket Tool and fill the selection with a random color. then press On Ctrl+D to deselect

Now add the following layer styles

With this layer selected go one more time to Select > Load selection

First create a new layer ( press Ctrl+Shift+Alt+N )

Then go to Select > Modify > Contract , and contract by 3 pixels one more time

Then with the Paint Bucket tool fill the selection with White, then press On Ctrl+D to deselect

Then add the following layer styles:

This is the result:

Now you can Select Ellipse Tool , and make a small circle

Then you can add the following layer styles

The next image is to modify the Contour for Bevel and Emboss settings:

The next image is to modify the Contour for Contour settings:

The next image is to modify the Contour for Satin settings:

This is the result

Select type tool and write some text. this is my final image. i hope you will find this tutorial useful