一些漂亮的按钮样式

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