实用鼠标感应按钮颜色渐变效果，有纯css版，jquery版，都很不错，根据自己下需求来选一款套用吧。
<!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/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>鼠标感应按钮颜色渐变特效_武鸣人</title>
<style type="text/css">
/* 页面样式 */
body{
background:#F2F2F2;
font:12px/1.5 Verdana,'宋体',tahoma,Srial,helvetica,sans-serif;
margin:0;
padding:0;
}
a{
font-size:12px;
color:#0F83DB;
text-decoration:none;
}
small{
font-family:Arial,sans-serif;
font-variant:small-caps;
color:#809dba;
}
h1{
margin:0;
color:#F60;
}
h2{
font-size:16px;
color:#666;
margin:0 0 15px;
border-bottom:1px dashed #CCC;
}
hr{
border:none;
height:1px;
line-height:1px;
background:#CCC;
margin-bottom:15px;
padding:0;
}
p{
margin:0;
padding:7px 0;
overflow:hidden;
_zoom:1;
}
#header a:hover,#www_wuming_ren p a:hover,#footer a:hover{
text-decoration:underline;
}
#header{
width:100%;
background:#666;
border-bottom:1px solid #FFF;
overflow:hidden;
height:32px;
}
#header_nav{
width:800px;
margin:0px auto;
padding:6px 0px;
}
#header a{
line-height:12px;
color:#FFF;
}
#header .top_home{
border-right:1px solid #FFF;
padding-right:6px;
margin-right:2px;
}
.left_wuming{
display:inline;
float:left;
}
.right_wuming{
display:inline;
float:right;
}
#www_wuming_ren,#footer{
width:760px;
margin:50px 50px 50px 50px;
margin-bottom:0;
padding:20px 20px;
background:#FFF;
border:1px solid #CCC;
border-bottom:none;
}
.wuming,.wuming_ren{
width:240px;
display:block;
margin:0 auto;
}
.wuming{
width:200px;
}
#footer{
width:780px;
padding:3px 10px;
margin:50px 50px 50px 50px;
border:1px solid #CCC;
border-top:none;
overflow:hidden;
}
#footer .left_wuming,#footer .left_wuming a{
font:bold 9px/20px Verdana,Geneva,sans-serif;
color:#AAA;
}
#footer a{
font-weight:bold;
color:#AAA;
text-decoration:underline;
}
#footer a:hover{
color:#F80;
}
/* 纯CSS按钮 */
.button{
width:200px;
height:80px;
display:block;
background:url(/img/20240304_www_wuming_ren_4.gif) top no-repeat;
text-indent:-9999px;
}
.button:hover{
background:url(/img/20240304_www_wuming_ren_4.gif) bottom no-repeat;
}
/* jQuery动态渐变按钮 */
.jsbutton{
position:relative;
display:block;
width:200px;
height:80px;
background:url(/img/20240304_www_wuming_ren_4.gif) top no-repeat;
cursor:pointer;
text-indent:-9999px;
}
.jsbutton span.hover{
position:absolute;
display:block;
width:200px;
height:80px;
background:url(/img/20240304_www_wuming_ren_4.gif) bottom no-repeat;
text-indent:-9999px;
}
/* 扩展应用按钮样式 */
.viewbutton,.viewbutton span.hover,.downloadbutton,.downloadbutton span.hover{
display:block;
width:120px;
height:42px;
background-image:url(/img/20240304_www_wuming_ren_5.gif);
text-indent:-9999px;
}
.viewbutton{
float:left;
position:relative;
background-position:top left;
}
.viewbutton span.hover{
position:absolute;
background-position:bottom left;
}
.downloadbutton{
float:left;
position:relative;
background-position:top right;
}
.downloadbutton span.hover{
position:absolute;
background-position:bottom right;
}
</style>
<script type="text/javascript" src="/img/jquery_wuming_ren.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.jsbutton,.viewbutton,.downloadbutton').wrapInner('<span class="hover"></span>').css('textIndent','0').each(function () {
$('span.hover').css('opacity', 0).hover(function () {
$(this).stop().fadeTo(650, 1);
}, function () {
$(this).stop().fadeTo(650, 0);
});
});
});//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件，请刷新页面后看效果！<br />
<div id="www_wuming_ren">
<h1>jOuery动态渐变按钮</h1>
<hr>
<h2>纯CSS效果 <small>| xhtml + css</small></h2>
<p class="wuming"><a href="https://www.wuming.ren" class="button">前端档案</a></p>
<br>
<h2>jQuery动态渐变效果 <small>| xhtml + css + javascript</small></h2>
<p class="wuming"><a href="https://www.wuming.ren" class="jsbutton">前端档案</a></p>
<br>
<h2>扩展效果应用</h2>
<p class="wuming_ren">
<a href="https://www.wuming.ren" class="viewbutton">查看演示</a>
<a href="https://www.wuming.ren" class="downloadbutton">下载源码</a>
</p>
</div>
<div id="footer">
<div class="left_wuming">Copyright # 2010 <a target="_blank" href="https://www.wuming.ren">www.wuming.ren</a></div>
<div class="right_wuming"><a target="_blank" href="https://www.wuming.ren">武鸣人</a></div>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处