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 ie6 ie7 ff的CSS hack使用技巧
关于CSS HACK的文章在jb51.net中提及的也很多。CSSer必须掌握的关于IE6、IE7和FF的最简单的hack技巧。
2008-09-09
让网页框架透明底部对齐的代码
2008-01-01
div层跨越iframe帧显示在上面的解决方法附代码
div iframe帧显示问题
2008-08-08
关于margin-left的示例代码
关于margin-left的示例代码...
2007-05-05
3个效果超酷的FORM表单美化效果打包下载
3个效果超酷的FORM表单美化效果打包下载...
2007-09-09
html工作中表格<tbody>标签的使用技巧
公司大部分的项目都是基于BS结构，UI设计阶段做WEB原型页面时要把各种交互效果实现出来，与真正的后台编程不同，就用JS前台编程来实现，让程序员编程前知道要做成什么样的效果就行了。
2008-09-09
css+table 1px边框单元格
用css不用以前比较传统的用表格背景+单元格背景实现的效果
2008-08-08
标准布局常见问题及解决办法
需要标准布局的朋友，经常会遇到一些问题，下面是一些布局问题
2008-11-11
css——之三行三列等高布局图文教程
css——之三行三列等高布局图文教程...
2007-04-04
css强制换行 css强制不换行的css方法
更多的关于css强制换行 css强制不换行的css方法可以参考本站的内容页的文章控制.
2007-12-12

css不用图片美化按钮

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具