本文实例讲述了js实现按钮颜色渐变动画效果的方法。分享给大家供大家参考。具体如下：
这里演示js实现按钮慢慢变色的方法，鼠标移到按钮上，按钮的背景色就发生变化，是慢慢的变化，点击按钮会打开指定链接，这里主要是演示按钮变色的代码实现方法。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/
具体代码如下：
<html><head><title>按钮慢慢变色</title>
<style type=text/css>
body {
margin-top: 0px; font-size: 9pt; margin-left: 0px; margin-right: 0px; font-family: "宋体"
}
a {
font-weight: 400; font-size: 9pt; color: black; text-decoration: none
}
a:hover {
font-weight: 400; font-size: 9pt; color: red; text-decoration: underline
}
a:active {
font: 9pt "宋体"; cursor: hand; color: #ff0033
}
.style1 {
color: #000099;
font-weight: bold;
font-family: "华文新魏";
font-size: 30px;
}
.style2 {
color: #ff3399;
font-size: 40px;
font-family: "华文行楷";
}
</style>
<meta http-equiv=content-type content="text/html; charset=gb2312">
</head>
<body bgcolor=#fef4d9>
<center>
<span class="style2">按钮慢慢变色</span>
</center><br>
<center>
<table bordercolor=#66ff00 border=5 borderlight="green">
<tbody>
<tr>
<td align=middle><span class="style1">效果显示</span></td>
</tr>
<tr>
<td align=middle>
<script language=javascript>
hexcolor = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
function mover() {
for (i = 0; i < 13; i++) {
settimeout("document.myform.button.style.background = "#"+hexcolor[12-i]+"0"+hexcolor[12-i]+"0c0";", i * 40);
}
}
function mout() {
document.myform.button.value = "进入javascript中文网";
for (i = 0; i < 12; i++) {
settimeout("document.myform.button.style.background = "#"+hexcolor[i]+"0"+hexcolor[i]+"0c0";", i * 40);
}
}
// end -->
</script>
<form name=myform>
<input onmousedown="document.myform.button.value=" 谢谢"" onmouseover=mover() onclick="window.location="http://www.jb51.net/"" onmouseout=mout() type=button value=鼠标放在上面 name=button >
</form></td></tr></tbody></table>
</center>
</body>
</html>
以上就是如何使用javascript实现按钮颜色渐变的动画效果方法介绍的详细内容。