一些漂亮的按钮样式:
分类:
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.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 >
.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 >