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. 你可以使用以上步骤制作出如下的网页导航条。
