css制作button 带有滤镜效果

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

 

css+html:

 <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   
     ;width:60px; height:22px;letter-spacing: 0.2cm
  }   
  .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   
     ;width:60px; height:22px;letter-spacing: 0.2cm
  }   
  .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   
    ;width:60px; height:22px;letter-spacing: 0.2cm
  }   
  .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   
     ;width:60px; height:22px;letter-spacing: 0.2cm
  }   
  .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   
    ;width:60px; height:22px;letter-spacing: 0.2cm
  }   
    
  .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   οnmοuseοver="this.className='btn1_mouseover'"   
    οnmοuseοut="this.className='btn1_mouseout'"   
    title="好看的按钮">好看的按钮2</button>         
  <button     
  class=btn1_mouseout   οnmοuseοver="this.className='btn1_mouseover'"   
    οnmοuseοut="this.className='btn1_mouseout'"   DISABLED>好看的按钮3</button>   
  <P>   
  <button   class=btn2   title="好看的按钮">好看的按钮4</button>   
  <P>   
  <button   class=btn3_mouseout   οnmοuseοver="this.className='btn3_mouseover'"   
    οnmοuseοut="this.className='btn3_mouseout'"   
    οnmοusedοwn="this.className='btn3_mousedown'"   
      οnmοuseup="this.className='btn3_mouseup'"   
      title="好看的按钮">查询</button>   
  <P>   
  <button   class=btn_2k3   title="好看的按钮">查询</button>