css不用图片美化按钮

ttx9n · 发表于 2008-5-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> 
 
 
 
 
<input class=button id=button type=button value="美化了的按钮"> 
 
 
 
<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需刷新才能执行]

8ayoqrpj · 发表于 2022-9-9 07:47:44

加快速度很快就撒谎

kwzc65wdj · 发表于 2022-11-24 01:17:59

很不错的玩意

平平安安 · 发表于 2022-12-12 01:47:41

好人好人好人好人

平平安安 · 发表于 2022-12-16 18:10:48

抽根烟，下来看看再说

3pjdk29w · 发表于 2022-12-17 12:34:42

谢谢分享，先下来用用

4k0mp7m · 发表于 2023-1-17 16:00:01

管灌灌灌灌灌灌灌灌灌灌

qq303604905 · 发表于 2023-1-20 07:27:23

啦啦啦啦啦德玛西亚

dm00ji1s · 发表于 2023-2-16 16:08:26

hi哦和烦恼农家女

u6h2m4 · 发表于 2023-4-3 19:18:55

儿飞飞微风DVD谁vdsvd

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] css不用图片美化按钮

相关帖子