G0dspeed's Blog » 收藏几个漂亮的CSS按钮代码

首页 > 编程相关 > 收藏几个漂亮的CSS按钮代码

收藏几个漂亮的CSS按钮代码

2007年4月22日 G0dspeed 发表评论阅读评论

HTML代码：

<style><br /> .btn {<br /> 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<br /> }<br /> .btn1_mouseout {<br /> 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<br /> }<br /> .btn1_mouseover {<br /> 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<br /> }<br /> .btn2 {padding: 2 4 0 4;font-size:12px;height:23;background-color:#ece9d8;border-width:1;}<br /> .btn3_mouseout {<br /> 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<br /> }<br /> .btn3_mouseover {<br /> 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<br /> }<br /> .btn3_mousedown<br /> {<br /> 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<br /> }<br /> .btn3_mouseup {<br /> 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<br /> }<br /> .btn_2k3 {<br /> 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<br /> }<br /> </style><br /> <body><br /> <button class=btn title=”CSS样式按钮”>CSS样式按钮</button><P></p><br /> <button<br /> class=btn1_mouseout onmouseover=”this.className=‘btn1_mouseover‘”<br /> onmouseout=”this.className=‘btn1_mouseout‘”<br /> title=”CSS样式按钮”>CSS样式按钮</button><br /> <button<br /> class=btn1_mouseout onmouseover=”this.className=‘btn1_mouseover‘”<br /> onmouseout=”this.className=‘btn1_mouseout‘” DISABLED>CSS样式按钮</button><br /> <P><br /> <button class=btn2 title=”CSS样式按钮”>CSS样式按钮</button><br /> <P><br /> <button class=btn3_mouseout onmouseover=”this.className=‘btn3_mouseover‘”<br /> onmouseout=”this.className=‘btn3_mouseout‘”<br /> onmousedown=”this.className=‘btn3_mousedown‘”<br /> onmouseup=”this.className=‘btn3_mouseup‘”<br /> title=”CSS样式按钮”>CSS样式按钮</button><br /> <P><br /> <button class=btn_2k3 title=”CSS样式按钮”>CSS样式按钮</button></body>

按钮样式：

分类: 编程相关标签: css

评论 (0) Trackbacks (0) 发表评论 Trackback

本文目前尚无任何评论.

本文目前尚无任何 trackbacks 和 pingbacks.

Who Links Me 在线制作卡通头像