双击Hover的基本形状图层副本打开图层样式窗口，将按钮的渐变效果反向。可以通过渐变叠加中的反向选项实现。这里我选择使用手动微调色标以达到更好的效果。
色标#1-颜色： #87bfe6，位置： 0%
颜色#1中点百分比-位置：40%
色标#2-颜色： #2877a ，位置： 95%
颜色#2中点百分比-位置：40%
色标#3-颜色： #4c9fd7 ，位置： 100%
第8步：裁剪并保存
用矩形选取工具（Rectangular Marquee Tool）圈住两个按钮创建一个选区（下图所示）；该选区的大小必须为170像素x100像素，因为稍后的CSS中会用到这个。这就是我们所说的CSS精灵。感兴趣可以去看看我的朋友Chris Coyie在CSS精灵上的教程。
一旦选中之后，进入图像（Image）>裁剪（Crop）
隐藏背景图层。
进入文件（File）>存储为Web和设备所用格式（Save for Web & Devices），勾选上透明度，选择PNG-8，然后以web_button.png的文件名保存在放置HTML文档同一个文件夹或目录当中。
第9步：HTML
在存放web button的同一个文件夹或目录中，创建一个名为web_button的HTML文档。
在源代码编辑器中打开HTML文档。（有些编辑器是操作系统默认的，如微软的Notepad程序）
如下图的HTML文档的代码所示，为Buy Now创建一个超链接。
在浏览器中预览HTML文档，看起来很枯燥。
（举报）
