This tutorial will show you how to make a Professional web button and also to use it like a Navigation Bar.

1. Make a rectangle with the Rectangle Tool (any color) and Rasterize it.

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

2. Then ad a Gradient Overlay: #252525, #595959 and #9a9a9a

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

3. And a Stroke: #424242

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

4. Make a gradient just over the middle of the button and go to Select/Modify/Contract and put 1px, then create a New Layer and fill it with any color, press Ctrl + D and change the fill to 0%

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

5. Add a Stroke: Transparent to White

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

6. Your button should look like this:

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

7. Create a New Layer and make a selection 1px height and fill it with a Radial Gradient, White to Transparent, starting out from the middle and deselect.

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

8. Now you’re going to do the same you did in the Step 7 but using #4a4a4a for the gradient.

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

9. And you should have something like this:

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

10. Create a New Layer and make a selection as shown below and fill it with a Linear Gradient #dadada to Transparent

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

11. Finally add some text, using Segoe 13 pt.

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!

Also you can make a Navigation Bar like this, using the same steps.

Adobe Photoshop Free Tutorials for the Photoshoplovr inside us!