本教程分为以下三个步骤：

Step1 - Photoshop

Step2 - HTML/CSS

Step3 - JavaScript(jQuery)

Step4 - CSS修改

00-1010 1.新文件按钮的大小是100px X 80px，但是由于我们需要创建一个有两种状态的CSS sprite背景图片，所以我们在Photoshop中创建(Ctrl+N)一个长宽为200px X 160px的图片文件，如下所示：。

2.创建一条参考线为了更容易绘制按钮，我们创建一条参考线，并将其从标尺中拉出。如果找不到尺子，可以按Ctrl R显示，如下图：。

3.在形状选择工具面板中绘制矩形工具，将圆角半径设置为10px，在画布上绘制形状，如下图：。

4.设置形状样式。继续图中的最后一步。双击图层打开图层样式窗口并设置形状样式。首先选择渐变叠加，将渐变颜色从#3d3d3d设置为#8b8b8b，如下图：。

然后，选择“内部发光”，将混合模式设置为“正常”，不透明度设置为100%，颜色设置为#ffffff，像素大小设置为3像素，如下所示：。

然后选择“描边”，将尺寸设置为1像素，位置设置为“内部”，颜色设置为黑色#000000，如下图：。

5.添加字体输入文本，并将文本设置为相对水平和垂直居中。字体为方形、类圆形，字体大小36点，加粗平滑，颜色为白色(#FFFFFF)，如下图所示：。

6.双击相同字体样式的文字图层，打开文字图层样式，设置字体样式，点击“投影”，将混合模式设置为“Normal”，颜色为#3e3e，不透明度为100%，角度为90度，距离为1像素，大小为2像素；点击“内阴影”，将混合模式设置为“正常”，颜色为#454545，不透明度为75%，角度为90度，距离为1像素，大小为2像素，如下图所示：。

至此，我们已经完成了链接状态下按钮的背景图，效果如下：。

7.悬停背景图制作鼠标悬停状态下的按钮背景图，将图层分组，复制组，移动，重命名，如下图：。

8.背景图像属性修改悬停背景图像的样式属性，打开背景图像的图层样式窗口，选择“描边”，将边框颜色修改为# 004D77选择渐变叠加，将渐变从#1671a3修改为#5baedc，如下图所示：。

9.设置字体样式，打开字体图层样式，选择“投影”，将投影颜色修改为# 207aad选择“内阴影”，将字体颜色改为#0d4f74，如下图所示：。

10.图层半透明添加图层半透明效果，按照上面的步骤进行修改。鼠标悬停背景图片如下。最后，添加一个半透明层。首先添加一个200px X 40px的白色层，设置顶部，将白色层的透明度设置为10%，如下图：。

最后我们完成的CSS精灵背景图如下，也可以点击下载PSD文件。

Step2-HTML/CSS按钮的HTML代码很简单：a class="button "前端文件/a，然后通过CSS设置背景图片，CSS代码如下：复制代码如下： /*链接按钮样式*/。按钮{ width:200px高度：80 px；显示：块；background : URL(BG _ button . gif)top no-repeat；text-indent :-9999 px；}/*按钮悬停样式*/.button:悬停{ background : URL(BG _ button . gif)bottom no-repeat；}根据我们之前设计的图片，按钮的长宽高为200px X 80px，背景图片为黑色按钮。这个CSS可以达到我们例子中的第一个效果(纯CSS效果)。第三步——JavaScript/jQuery通过JavaScript，我们可以让按钮更酷。我们需要添加一个span元素作为鼠标悬停时显示的背景层，然后将HTML修改为：view sourceprint？a class=" button " span class=" hover "前端文件/span/a span元素在鼠标悬停之前是完全透明的，当鼠标经过时逐渐变得不透明，从而达到渐变的效果。动画流程如下：。

通过以上分析，我们可以编写如下jQuery代码。DOM加载完成后，为按钮链接添加span层作为鼠标经过时的背景图片，为span元素添加鼠标悬停事件。当鼠标经过时，会逐渐变得不透明，当鼠标离开时，会逐渐变得完全透明。按照如下方式复制代码： //将文本包含在span元素中，并将其附加到。按钮。$ ('.jsbutton，视图按钮，download button’)。wrap inner(' span class=' hover '/span ')。CSS ('textindent，0 ')。每个(函数(){//首先在span元素中设置完全透明，然后添加鼠标悬停事件$ ('span。悬停')。CSS('不透明度'，0)。悬停(function () {$ (this))。停止()。fadeto (650，1。//渐变为不透明}，function () {$ (this)。停止()。fadeto (650，0)；//渐变到全透明})；});至此，我们已经完成了JS代码，还要注意一步，CSS修改，参见Step4。步骤4-CSS修改在纯CSS效果的例子中，我们使用：hover伪类来切换精灵图片。当我们使用jQuery时，我们引入了一个跨度层作为鼠标经过时的背景图片。因此，CSS需要修改如下：复制代码如下： /* *前的按钮悬停样式。button3360悬停{后台3360 URL(BG _ button . gif)bottom no-repeat；}修改复制代码如下： /*不设置：hover的样式，设置span.hover */的样式。button span.hover {/*注意使用绝对定位*/position : absolute；display:块；宽度width:200px高度：80 px；background : URL(BG _ button . gif)底部无重复；text-indent :-9999 px；}综上所述，我们分四步实现了一个动态渐变按钮。在演示中，我还提供了一个扩展示例。你可以自己实现一个或者下载源代码修改定制。当然，如果你有什么好的建议或问题，请给我留言。演讲地址http://demo.jb51.net/js/gcb _下载/年度更改-按钮. html下载地址http://demo.jb51.net/js/gcb_download/gcb_download.rar.