CSS写出的几个特效的按钮,网页特效、网站建设技术、网站SEO技术

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>网页特效|http://www.sjera.com/articles/|---用CSS实现的几个非常漂亮的按钮</title> 
<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> 
</head>

<body> 
<button class=btn title="好看的按钮">好看的按钮</button><P></p> 
<button  
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" 
onmouseout="this.className='btn1_mouseout'" 
title="好看的按钮">好看的按钮</button>   
<button  
class=btn1_mouseout onmouseover="this.className='btn1_mouseover'" 
onmouseout="this.className='btn1_mouseout'" DISABLED>好看的按钮</button> 
<P> 
<button class=btn2 title="好看的按钮">好看的按钮</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="好看的按钮">好看的按钮</button> 
<P> 
<button class=btn_2k3 title="好看的按钮">好看的按钮</button> 
</body>

</html>

关于我们｜加盟代理｜联系方式｜付费方式｜帮助中心｜设为首页｜加入收藏

Copyright © 2004-2008 SJERA.COM All rights reserved 南京迅虎科技有限公司·中国版权所有备案编号：苏ICP备08017889号
24小时电话：025-68858607 E-mail：service@sjera.com 公司地址：珠江路88号新世界中心A座1005A 邮编：210008
编辑人员: 904900607 978744020 851031360 948119634 技术交流群：58102068 29780417