几个漂亮的 button 样式

<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 
} 

.btn_flat   { 
  BORDER-RIGHT:   #ffffff   1px   solid;   BORDER-TOP:   #ffffff   1px   solid;   FONT-SIZE:   12px;   FILTER:     BORDER-LEFT:   #ffffff   1px   solid;   CURSOR:   hand;   COLOR:   black;   BORDER-BOTTOM:   #ffffff   1px   solid 
} 
</style> 
<body> 


<button   class=btn_flat   title= "好看的按钮 "> 好看的按钮1 </button> <P> </p> 

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

</body>
</html>
posted on 2010-06-22 18:09 kevin_20131022 阅读(1961) 评论(0) 收藏举报
刷新页面返回顶部
kevin 愛戀 20140103
