这个效果实现其实非常简单，第一步：准备两个图片，大小完全相同即可，这里是128X34像素。

左边这个是通常状态时的图片，叫background.gif，右边这个市鼠标经过时的图片，叫background-hover.gif。
第二步，写HTML部分的代码：
1 <a href="#">Button Text</a>
复制代码

就是一个非常普通的超链接文本，如果希望完全使用图片而不是用任何文字，也可以。
第三步：CSS部分的代码是这样的：
2 a:link, a:visited{
3 display:block;
4 width:128px;
5 height:34px;
6 css特效文字font-size:14px;
7 font-family:Arial;
8 line-height:34px;
9 text-align:center;
10 color:black;
11 text-decoration:none;
12 background:url('background.gif') no-repeat;
13 }
14 a:hover, a:active{
15 background:url('background-hover.gif') no-repeat; color:white;
16 }
复制代码
好了，这个效果就完成了，是不是非常简单。下面简单解释一下CSS代码的含义。
第1~14行代码是定义鼠标没有经过超链接时的CSS样式：
首先要把a元素变为块级元素，然后设定它的高度和宽度与图片相同。
然后是文字放到图片的中心位置。
最后设定背景图像的地址。
接下来的第16~19行代码定义鼠标经过时所需要变化的CSS样式。
把文字的颜由黑变为白，并把图片换成另一个图片即可了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。