本教程分为以下三步： [h1]Step1 - Photoshop[/h1] [h1]Step2 - HTML/CSS[/h1] [h1]Step3 - JavaScript(jQuery)[/h1] [h1]Step4 - CSS修改[/h1]   　　最终结果如下： [img]http://files.jb51.net/upload/201004/20100425023112757.jpg[/img] [h1]Step1 - Photoshop[/h1] [b]1. 新建文件[/b] 　　按钮的尺寸是100px X 80px，但由于我们需要创建一个有两种状态的CSS sprite背景图，所以我们在Photoshop中创建（Ctrl+N）一个长宽为200px X 160px的图片文件，如下图： [img]http://files.jb51.net/upload/201004/20100425023112456.jpg[/img] [b]2. 创建参考线[/b] 　　为了使绘制按钮更容易，我们创建参考线，从标尺中拉出参考线，如果你找不到标尺，可以按Ctrl+R显示，如下图： [img]http://files.jb51.net/upload/201004/20100425023112706.jpg[/img] [b]3. 绘制形状[/b] 　　选择工具面板中的矩形工具，设置圆角半径为10px，在画布上绘制形状，如下图： [img]http://files.jb51.net/upload/201004/20100425023113806.jpg[/img] [b]4. 设置形状样式[/b] 　　接上图最后一步，双击层，打开图层样式窗口，设置形状的样式，首先选择渐变叠加，设置渐变颜色从#3d3d3d到#8b8b8b，如下图： [img]http://files.jb51.net/upload/201004/20100425023113710.jpg[/img] 　　然后，选择“内发光”，设置混合模式为“正常”，不透明度为100%，颜色设置为#ffffff，图素大小设置为3像素，如下图： [img]http://files.jb51.net/upload/201004/20100425023113928.jpg[/img] 　　之后，再选择“描边”，设置大小为1像素，位置为“内部”，颜色为黑色#000000，如下图： [img]http://files.jb51.net/upload/201004/20100425023113564.jpg[/img] [b]5. 添加字体[/b] 　　输入文本，设置文字相对水平和垂直居中，字体为方正准圆简体，字号36点，加粗平滑，颜色为白色（#FFFFFF），如下图： [img]http://files.jb51.net/upload/201004/20100425023113220.jpg[/img] [b]6. 设置字体样式[/b] 　　同样的双击文字图层，打开文字图层样式，设置字体样式，点击“投影”，设置混合模式为“正常”，颜色为#3e3e3e，不透明度为100%，角度为90度，距离为1像素，大小为2像素；点击“内阴影”，设置混合模式为“正常”，颜色为#454545，不透明度为75%，角度为90度，距离为1像素，大小为2像素，如下图所示： [img]http://files.jb51.net/upload/201004/20100425023113371.jpg[/img] 　　至此，我们就完成链接状态下的按钮背景图，效果如下： [img]http://files.jb51.net/upload/201004/20100425023113660.jpg[/img] [b]7. 悬停背景图[/b] 　　制作鼠标悬停状态下的按钮背景图，把图层放入组内，复制组，移动，并重命名，如下图： [img]http://files.jb51.net/upload/201004/20100425023113817.jpg[/img] [b]8.背景图属性[/b] 　　修改hover背景图的样式属性，打开背景图的图层样式窗口，选择“描边”，修改边框颜色为#004d77；选择“渐变叠加”，修改渐变从#1671a3到#5baedc，如下图：   [img]http://files.jb51.net/upload/201004/20100425023113651.jpg[/img] [b]9. 设置字体样式[/b] 　　打开字体图层样式，选择“投影”，修改投影颜色为#207aad；选择“内阴影”，修改字体颜色为#0d4f74，如下图： [img]http://files.jb51.net/upload/201004/20100425023113447.jpg[/img] [b]10. 图层半透明[/b] 　　添加图层半透明效果，按以上步骤修改，鼠标悬停背景图如下，最后是再加上一层半透明层，先添加一个200px X 40px的白色层，置顶并设置白色层的透明度为10%，如下图： [img]http://files.jb51.net/upload/201004/20100425023113382.jpg[/img] 　　最后，我们完成的CSS sprite背景图如下，您也可以点击下载PSD文件。 [img]http://files.jb51.net/upload/201004/20100425023113977.jpg[/img] [b]Step2 - HTML/CSS[/b] 　　按钮的HTML代码很简单： <a class=”button”>前端档案</a> 　　再通过CSS设置一下背景图片就可以了，CSS代码如下：