这个Photoshop教程将教你如何设计一个简单光滑亮丽过度状态的“Web2.0风格”按钮。你还能学到以下CSS技术(CSS文字背景与图片背景的转换) 建立文档 1、新建一个250*100px的文档。 2 按Ctrl + R调出标尺，然后用鼠标单击上面的标尺拉出一条水平线，定位到50px处（如果看不到下图效果，右击标尺处选择“像素”）。 建立样式 3 .选择“圆角矩形工具”，半径为3px。 4 .鼠标放在右上角，拉出250*50px矩形框。 5 .按住Ctrl键同时单击形状图层。 6 .新建一图层，命名为“Idle”，按Shift + F5填充图层。 7.删除圆角图层，实质它并不需要。（按Ctrl+D 取消选中边框） 增加一些样式。 8 .双击 Idle图层，打开图层样式。 9 . 选择“渐变叠加",点击“渐变”打开渐变编辑器。点击滑块左边的坐标，输入颜色值：#618926,单击右边的色标，输入颜色值：#98ba40。在位置输入35%。 10 .增加内阴影效果。混合模式为：正常。颜色值：#c6d894。不透明度：100%，距离和大小：2px。 11 .增加描边效果，大小为1px，位置为内部。颜色同第9步的颜色：#618926。如图所示。 12. 新建一个图层，命名为Radial_Gradient。设置前景色为：#b8cf69。按Ctrl同时单击Idle图层。然后回到Radial_Gradient图层。 13 .切换到渐变工具，选择“径向渐变”。单击渐变工具弹出对话框。 14 .在渐变对话框中选择“前景色到透明渐变”。确认左边是青绿色：#b8cf69。 15.确认你已选择圆角矩形和激活Radial_Gradient层，还有标尺处于开启状态。从头部往下拉大概30px。 16 .调整透明度为80%或者你喜欢的程度。 创建过渡状态样式 17 .按Shift同时选中Idle 和Radial_Gradient图层，复制图层。 18 .使用移动工具把刚复制的两个图层移到按钮底下。把Idle副本命名为Rollover、Radient_Gradient副本命名为：Radient_Gradient。 调整的过渡状态层风格 19 .除了颜色，其他地方保持一致。双击Rollover图层打开“图层样式”对话框，选择“内阴影”颜色设置：#839dbf。选择“渐变叠加”，改变左边色标值为：#0f2557，右边为#245293。最后，选择“描边”，颜色值为深蓝色：#0f2557。 20 .接下来我们给Radial_Gradient_Rollover层覆盖颜色。双击该层，选择“颜色叠加”，颜色值：#5c737c。 增加文本 21 .首先，我们选择一个简单的字体系列：Arial，你也可以选你所爱，以下这些技术，是一些大胆的建议。 22 .选择文字工具，字体为：Arial，加粗，大小为16px,平滑。颜色为白色。在按钮上输入你想要的文字。 给文字增加些效果 23 .双击文字图层打开图层样式，选择“投影”，混合模式：正常，颜色：#618926，不透明度：100%，不要选择“使用全局光”，大小和距离为1px。 24 .按Ctrl键同时点击Idle图层，确认文字处于激活状态。 25 .选择“图层”>对齐>垂直居中 26 .选择“图层”>对齐>水平居中 27 .激活文字图层，右键“复制图层” 28 .按Ctrl同时选中Rollover和复制文字的图层。然后水平对齐和居中对齐。 29 .双击文字图层，把投影颜色改为：#0f2557。 30 .保存为Web格式，命名为：campaign-monitor-button.png 31.创建HTML，同上。 创建一个简单的内部链接样式。用p标签来制作，如图： <p class="button"><a href="#null">Click this button</a></p> 创建CSS 创建一个简单CSS背景交换技术。创建一个CSS，加入以下样式： .button { display:block; width:250px; height:50px; text-indent:-9999px; } .button a { display:block; width:100%; height:100%; background:transparent url(campaign-monitor-button.png) no-repeat top left; outline:none; } .button a:hover { background-position:0 -50px; } 下载完整按钮文件 如果大家还有任何疑问，欢迎在后面留言。我们团队将奉献更多更好的资源，欢迎常来哦！ ...more»