Heim > Artikel > Web-Frontend > So verschönern Sie Schaltflächen mit CSS, ohne Bilder zu verwenden

So verschönern Sie Schaltflächen mit CSS, ohne Bilder zu verwenden

墨辰丷Original: 2018-05-09 18:14:191899Durchsuche

In diesem Artikel wird hauptsächlich vorgestellt, wie man Schaltflächen mit CSS verschönert, ohne Bilder zu verwenden.

Der Code lautet wie folgt:

<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>

Verwandte Empfehlungen:

HTML Realisieren Sie die Verschönerung des hochgeladenen Dateistils

Detaillierte Grafik- und Texterklärung zur Verschönerung von Radio- und Karostilen

So verschönern Sie den Stil von HTML-Kontrollkästchen und Radio

Das obige ist der detaillierte Inhalt vonSo verschönern Sie Schaltflächen mit CSS, ohne Bilder zu verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Anwendung von Sprites in CSSNächster Artikel：Anwendung von Sprites in CSS

In Verbindung stehende Artikel

Mehr sehen