一些漂亮的按钮样式:

一些漂亮的按钮样式:

分类: ASP.NET

< 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.youkuaiyun.com/juwuyi<br><br>  
< button  class = btn title = " 这是优快云的官方按钮 " >  好看的优快云 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.youkuaiyun.com/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.youkuaiyun.com/juwuyi "   
>  好看的QQ Button </ button >  
< P >  
< button  class = btn_2k3 title = " 这是JoeCom(juwuyi)的原创按钮 Joecom'sblog:http://blog.youkuaiyun.com/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 >