变色按钮的制作Demo

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<HTML><HEAD>
<TITLE>变色的按钮</TITLE>
<STYLE type=text/css>
BODY {
	MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "微软雅黑"
}
.STYLE1 {
	font-size: 40px;
	color: #0000CC;
}
.STYLE2 {
	color: #00FF00;
	font-weight: bold;
	font-size: 30px;
	font-family: "微软雅黑";
}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9><BR><BR>
<CENTER>
  <span class="STYLE1">变色的按钮</span>
</CENTER><BR>
<CENTER>
<TABLE borderColor=#FF99FF border=5 borderlight="green">
  <TBODY>
  <TR>
    <TD align=middle><span class="STYLE2">效果显示</span></TD>
  </TR>
  <TR>
    <TD align=middle>
<STYLE>.initial2 {FONT-WEIGHT: bold; BACKGROUND-COLOR: lime}
</STYLE>
<SCRIPT>
<!--
function change(color){
var el=event.srcElement
if (el.tagName=="INPUT"&&el.type=="button")
event.srcElement.style.backgroundColor=color
}

function jumpto2(url){
window.location=url
}

//-->
</SCRIPT>
      <FORM onMouseOver="change('red')" onMouseOut="change('green')">
        <input name="button" type=button class=initial2 onClick="jumpto2('http://www.163.com')" value="网易 ">
        <INPUT class=initial2 onClick="jumpto2('http://www.baidu.com')" type=button value="百度一下"> 
      </FORM></TD></TR></TBODY></TABLE>
</CENTER>
</BODY>
</HTML>

​x
 
<HTML><HEAD>
<TITLE>变色的按钮</TITLE>
<STYLE type=text/css>
BODY {
    MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "微软雅黑"
}
.STYLE1 {
    font-size: 40px;
    color: #0000CC;
}
.STYLE2 {
    color: #00FF00;
    font-weight: bold;
    font-size: 30px;
    font-family: "微软雅黑";

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

变色按钮的制作Demo

分类

网站常用

描述

网页上变色按钮的制作演示代码，当鼠标移上按钮上的时候，按钮的颜色发生变化，是怎么实现的呢？其实并不是很难实现，用CSS和JS都可以实现，本代码是使用了JAVASCRIPT 实现，主要是练习练习JS的使用，有兴趣的仔细研究研究。