鼠标点击后立即出现一个按钮代码,JS代码库,德仔网

代码语言

代码分类

【JS】鼠标点击后立即出现一个按钮

作者:dezai / 发布于2014/4/8/ 396

JS与CSS共同实现的一个按钮效果，鼠标移在文字上点击后，文字变成了按钮，实际上本身就是一个按钮，通过CSS把按钮的边框和背景色都去掉了，当鼠标移上的时候，只不过是还原了按钮的本色

<HTML><HEAD>
<TITLE>立体变换的按钮</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9><BR><BR>
<CENTER>立体变换的按钮</CENTER><BR>
<CENTER>
<TABLE borderColor=#00FF00 border=5 borderlight="green">
 <TBODY>
 <TR>
  <TD align=middle><div align="center"><span class="STYLE2"><FONT color=red>效果显示</FONT></span></div></TD>
 </TR>
 <TR>
  <TD align=middle>
   <STYLE type=text/css>.text {
 FONT-SIZE: 12pt; COLOR: #ff0000; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"
}
A:hover {
 FONT-SIZE: 12pt; COLOR: #000000; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
.normal {
 
}
.over {
 BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #cccccc
}
.down {
 BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #ffffff 1px solid; BORDER-BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR: #cccccc
}
.link {
 COLOR: #000000; FONT-FAMILY: 宋体; TEXT-DECORATION: none
}
</STYLE>
   <TABLE height=30 cellSpacing=0 cellPadding=0 width=80 border=0>
    <TBODY>
    <TR>
     <TD onmouseup='this.className="over"' class=normal
     onmousedown='this.className="down"'
     onmouseover='this.className="over"'
     onmouseout='this.className="normal"'>
      <DIV align=center><A style="CURSOR: default"
      href="http://www.sina.com.cn/" target=_blank>立体按钮</A>
 </DIV></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER>
</BODY>
</HTML>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　点击后立出现按钮　

同语言下

可能有用的

dezai贡献的其它代码(1065)