一些漂亮的按钮样式

<style> 
.btn { 
BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid 
} 
.btn1_mouseout { 
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#B3D997); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid 
} 
.btn1_mouseover { 
BORDER-RIGHT: #7EBF4F 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7EBF4F 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#CAE4B6); BORDER-LEFT: #7EBF4F 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7EBF4F 1px solid 
} 
.btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;} 
.btn3_mouseout { 
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid 
} 
.btn3_mouseover { 
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid 
} 
.btn3_mousedown 
{ 
BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid 
} 
.btn3_mouseup { 
BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid 
} 
.btn_2k3 { 
BORDER-RIGHT: #002D96 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #002D96 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#FFFFFF, EndColorStr=#9DBCEA); BORDER-LEFT: #002D96 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #002D96 1px solid 
} 
</style> 

转摘 http://blog.csdn.net/juwuyi<br><br>  
<button class=btn title="这是CSDN的官方按钮"> 好看的CSDN Button</button><P></p> 
<button 
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" 
onmouseout="this.className='btn1_mouseout'" 
title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:http://blog.csdn.net/juwuyi"  
> 好看的Green Button</button>  &nbsp;<br><br> 
<button 
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" 
onmouseout="this.className='btn1_mouseout'" DISABLED 
> 好看的Green Button</button> 
<P> 
<button class=btn2 title="这是e商2003的官方按钮"> 好看的 e商2003 Button</button> 
<P> 
<button class=btn3_mouseout onmouseover="this.className='btn3_mouseover'" 
onmouseout="this.className='btn3_mouseout'" 
onmousedown="this.className='btn3_mousedown'" 
  onmouseup="this.className='btn3_mouseup'" 
  title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:http://blog.csdn.net/juwuyi"  
> 好看的QQ Button</button> 
<P> 
<button class=btn_2k3 title="这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:http://blog.csdn.net/juwuyi" > 好看的 2003 Button</button> 

语法高亮 脚本:
<PUBLIC:COMPONENT NAME="FormatPhpCodeHTC">  
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="FormatPhpCode()" FOR="element"/>  
<PUBLIC:PROPERTY NAME="keyword-color" PUT="SetKeyWordColor">  
<PUBLIC:PROPERTY NAME="note-color" PUT="SetNoteColor">  
<PUBLIC:PROPERTY NAME="summary-color" PUT="SetSummaryColor">  
<PUBLIC:PROPERTY NAME="font-size" PUT="SetFontSize">  
<script language="Jscript">  
  
        var PhpKeywords = [ "as","bool","break","case","class","define","continue","do","else","extends","false", "for","foreach","function",  
        "require","if","in", "is", "new","null","return","set","short","sizeof","static","switch",  
        "this","var","true","value","while"];  
        var reg;  
        var keyWordsPattern = PhpKeywords.join("|")  
        var keywordColor = "blue" //default keyword color  
        var noteColor = "green" //default note color  
        var summaryColor = "#808080" //default summary color  
        var fontSize = "12px"  
        var bb_code_li_1 = '<li style="margin-left:0px;margin-top:0px;margin-bottom:0px">';  
        var bb_code_li_2 = '</li>';  
  
function SetKeyWordColor(vValue)  
{  
        keywordColor = vValue;  
}  
  
function SetNoteColor(vValue)  
{  
        noteColor = vValue;  
}  
  
function SetSummaryColor(vValue)  
{  
        summaryColor = vValue;  
}  
function SetFontSize(vValue)  
{  
        fontSize = vValue;  
}  
  
function FormatPhpCode()  
{  
  
        var text = element.innerHTML;  
  
        text = text.replace(/</g,"<");  
        text = text.replace(/>/g,">");  
        text = text.replace(/<PRE>/g,"<PRE>");  
        text = text.replace(/</PRE>/g,"</PRE>");  
  
    reg = new RegExp("\b("+keyWordsPattern+")\b","g");  
    text = text.replace(reg,"<font color='"+keywordColor+"'>$1</font>");  
      
  
reg = new RegExp("<font color='"+keywordColor+"'>("+keyWordsPattern+")</font>","gi")  
text = text.replace(/\"(.*?)\"/g,function($1){return $1.replace(reg,"$1")});  
  
  
text = text.replace(/(^s*/{4}.*)|(^s*//([^/].*|\b))/gm,function($1){return "<font color='"+noteColor+"'>"+$1.replace(/</?font.*?>/gi,"")+"</font>"});  
  
  
//text = text.replace(/(/*.*?*/)/gi,function($1){return "<font color='"+noteColor+"'>"+$1.replace(/</?font.*?>/gi, "")+"</font>"});  
  
text = text.replace(/[(/?font[^]]*)]/gm,"<$1>");  
  
text = text.replace(/n/g, "n" + bb_code_li_2 + bb_code_li_1);  
element.innerHTML = '<ol>' + text + '</ol>';  
element.style.fontSize = fontSize;  
}  
</script>  
</PUBLIC:COMPONENT>