简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）

Home > Article > Web Front-end > CSS does not require pictures to beautify buttons_Experience exchange

CSS does not require pictures to beautify buttons_Experience exchange

WBOYOriginal: 2016-05-16 12:05:531441browse

<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="Beautified button">
</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+"\" alt="CSS does not require pictures to beautify buttons_Experience exchange" >" 
           } 
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+"\" alt="CSS does not require pictures to beautify buttons_Experience exchange" >" 
           } 
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 Select all Note:If you need to introduce external Js, you need to refresh it to execute]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS multi-row and multi-column news mode_Experience exchangeNext article：CSS multi-row and multi-column news mode_Experience exchange

Related articles

See more