Button标签直接使用CSS定义样式，优点是立体感、有按下状态，缺点是样式单一、各浏览器下显示效果不一致。
a标签+背景图片+滑动门技术，优点是可实现多种视觉效果，缺点是采用滑动门技术会导致背景图片过大。
a标签直接使用CSS3绘制，优点是在保证视觉效果的基础上大大减少了背景图片的使用，缺点是部分浏览器不兼容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.box {
width: 100pxheight: 100px position: relative
}
.box a {
width: 100pxheight: 100pxdisplay: blockposition: absolutetop: 0left:0background: #ffffilter:alpha(opacity=0)/* IE */ opacity:0)/* FF */
}
.box a:hover {
width: 100pxheight: 100pxdisplay: blockbackground: url(111.jpg) no-repeat center centerfilter:alpha(opacity=100)opacity:1
}
</style>
</head>
<body>
<div class="box"><img src="contact_us.jpg" width="100" height="100" /><a href="http://www.baidu.com"></a></div>
</body>
</html>
--------------------- ps ----------------------
图片你自己可以找2张，路径应该也不用我说了吧。img 是你的新闻图片，background是你的那个按钮图。你要用的效果涉及到鼠标滑动，CSS的话就是hover，但是A标签里面没有内容的情况下在IE下面是不能点击的，所以用到了background:#fff然后用滤镜效果让它透明。希望我的答案能让你满意，如果还有疑问可以发消息给我。 这个方法我测试过了的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>title>
<style type="text/css">
.box {
width: 100pxheight: 100pxposition: relative
}
.box a {
width: 100pxheight: 100pxdisplay: blockposition: absolutetop: 0left:0background: #ffffilter:alpha(opacity=0)/* IE */ opacity:0)/* FF */
}
.box a:hover {
width: 100pxheight: 100pxdisplay: blockbackground: url(111.jpg) no-repeat center centerfilter:alpha(opacity=100)opacity:1
}
CSS3代码
随着HTML5/CSS3技术日趋成熟，现如今被越来越多的网站广泛的运用。模板之家代码频道为大家收集整理最新的CSS3按钮代码，CSS3菜单代码，CSS3特效代码等供大家学习交流，好的代码是学习进步的基石同时也可以在项目中得以运用。
