Start with a new document, create a new layer, and select the Rounded Rectangle Tool and draw a 69px by 22px rectangle.

Select the layer (Command+Click on the layers thumbnail) and create a new layer above it and fill it with a gradient with the colors:
#b7b7b7 (foreground), #767777 (background)

Delete the rectangle layer.

Step 2

Select the layer and create a new layer above it then go to Select->Modify->Contract and contract the selection by 1px.
Now with the selection still present go to Select->Modify->Border and enter 1px.

Select the Gradient Tool and select the foreground to transparent option and put #d5d5d5 as your foreground color.

Draw a gradient starting at the top and ending about 3/4s of the way down on the button.

Step 3

Select the rectangle layer (the button) create a new layer and go to Select-Modify->Contract and contract it by 2px
Fill the layer with #adadad and set the Opacity to 42%.

Select the newly created layer, create a new layer, select the Gradient Tool, hit D then X and draw a gradient from the top of the selection to about the middle. Lower the Opacity to 20%.

Step 4

Duplicate the base layer, select the Move Tool hit the down arrow key and the right arrow key once. Lower the Opacity to 30%

Conclusion

Now add some text and your done! I hope you learned some new things form this tutorial and it was easy to follow. If you have any suggestions please visit the Suggest A Tutorial page.

Download PSD

Download “button.psd”