css不用图片美化按钮

更新时间：2008年05月15日 23:32:09 作者：

不用图片用css实现按钮的美化效果代码

<html> <style> .tb{width:100%;height:1px;overflow:hidden;background:rgb(250,100,0);margin:0 1px;} .lr{width:100%;height:20px;overflow:hidden;border-left:1px solid rgb(250,100,0);border-right:1px  solid rgb(250,100,0);} .bg{width:100%;height:20px;overflow:hidden;} .button{position:relative;width:100%;height:20px;top:-20px;font- size:9pt;border:0;background:none;} </style> <div style="float:left;width:100;"> <div class=tb></div> <div class=lr> <div class=bg id=bg></div> <input class=button id=button type=button value="美化了的按钮"> </div> <div class=tb></div> </div> <script> function rgb(){ ID=arguments[0] oRGB=eval(arguments[1]) nRGB=eval(arguments[2]) var IMG="" for(i=20;i>0;i=i-2){ RGB="rgb("+(oRGB[0]-1)+","+(oRGB[1]-1)+","+(oRGB[2]-1)+")" IMG+="<img style=\"width:100%;height:1px;background:"+RGB+"\">"            } for(i=20;i>0;i=i-2){ RGB="rgb("+(nRGB[0]-1)+","+(nRGB[1]-1)+","+(nRGB[2]-1)+")" IMG+="<img style=\"width:100%;height:1px;background:"+RGB+"\">"            } eval(ID+".innerHTML=IMG") } rgb("bg",[255,180,20],[255,140,20]) button.onmouseover=function(){rgb("bg",[255,200,20],[255,160,20])} button.onmouseout=function(){rgb("bg",[255,180,20],[255,140,20])} </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

css font缩写总结附实例
css 缩写
2008-06-06
css写菜单：简洁注释版
css写菜单：简洁注释版...
2006-12-12
制作WEB在线编辑器-插入HTML标签
制作WEB在线编辑器-插入HTML标签...
2007-03-03
html中CSS:hover选择器改变子元素、同级元素、就近元素的样式
鼠标悬浮覆盖元素后,以前使用js的mouseover和mouseout添加监听事件可以实现交互,现在可以使用CSS中的:hover选择器提高性能,:hover选择器可以针对不同的HTML元素,在鼠标悬停时改变元素（也可以是子元素、同级元素、就近元素）的样式,增强网页的互动性和用户体验,
2023-08-08
针对浏览器隐藏CSS之独孤九剑
针对浏览器隐藏CSS之独孤九剑...
2007-03-03
css首字放大实例代码
2008-09-09
一个针对IE7的CSS Hack
一个针对IE7的CSS Hack...
2007-01-01
XHTML下用dl,dt,dd标签实现翻页的效果代码
XHTML下用dl,dt,dd标签实现翻页的效果代码...
2007-09-09
纯CSS实现上下左右都居中的代码
一个上下左右都居中的非table的纯CSS实现代码
2008-11-11
Css利用js的expression实现的效果
Css利用js的expression实现的效果...
2007-02-02