网页设计师在设计网页按钮时可能需要设计变色效果，我们可以用CSS来实现，网页设计培训小编详解一下制作流程，需要的朋友可以收藏。

首先准备两张图片，一张正常状态的图片，一张按下去效果图片，例如下图。





设置链接a的背景为第一张图片，a:hover的背景为第二张图片

代码如下：

HTML代码：

< a href="#" id="theLink" >< /a >

CSS代码：

#theLink{
display:block;/*因为标签a是内链元素，所以利用这句话将内链元素转化成块状元素，后面的width和height才起作用*/
width:120px;
height:41px;
margin:0 auto;
background:url(../images/normal.gif) no-repeat;
}
#theLink:hover{background:url(../images/press.gif) no-repeat;}