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.
　使用矩形工具画一个长方形，填充任何颜色都可以。

2. Then ad a Gradient Overlay: #252525, #595959 and #9a9a9a
　设置一条灰色渐变，值为： #252525, #595959 到#9a9a9a


3. And a Stroke: #424242
　增一个像素的的描边，颜色值为：#424242


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%
　（这一步是制制按钮顶部的高度效果）新建一层，用选区工具选择按钮的上半部份，选择>修改>收缩，一个像素，随便填充一个颜色，将图层面版的填充值设为0%，再选择此透明图层收综一个像素，删除中间部份的内容，剩下的为一个像素的透明外框。


5. Add a Stroke: Transparent to White
　运用图层样式，进行白色到透明的渐变，不透明度设为50%


6. Your button should look like this:
　效果如下：


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.
　新建一层，画一个像素高度的选区，从层中间位置开始用白色到透明的颜色值拉一个径向渐变填充。


8. Now you’re going to do the same you did in the Step 7 but using #4a4a4a for the gradient.
　和上面第7步一样，新建到层进行填充，颜色值为#4a4a4a。


9. And you should have something like this:
　效果如下：


10. Create a New Layer and make a selection as shown below and fill it with a Linear Gradient #dadada to Transparent
　新建一层，用选区工具画一个长方形（长度跟上面的按钮一样，高度仅为一半即可），运用渐变工具进行填充，颜色值为#dadada到透明。


11. Finally add some text, using Segoe 13 pt.
　增加一些文字，使用Segoe字体13pt


Also you can make a Navigation Bar like this, using the same steps.
你可以使用以上步骤制作出如下的网页导航条。