一些漂亮的按钮样式:

来源：互联网发布：mac web原型设计工具编辑：程序博客网时间：2024/05/10 16:55

一些漂亮的按钮样式:

分类: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 {

}

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

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>