页面导航：首页 → 网络编程 → CSS/HTML → 经验交流 → 正文内容 css美化

css不用图片美化按钮

发布：dxy 字体：[增加减小] 类型：转载

不用图片用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 全选提示:你可先修改部分代码,再按运行]

Tags：css 不用图片美化按钮

浏览次数：载入中... 打印本文关闭本文返回首页

0

顶一下

上一篇文章：用CSS实现的一张图完成的按钮效果
下一篇文章：div的dispaly:inline样式和span的区别

·在百度中搜索关于“css不用图片美化按钮”相关内容
·在谷歌中搜索关于“css不用图片美化按钮”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

css不用图片美化按钮

文章评论

同类文章

最近更新

热点排行

css不用图片美化按钮

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行