zoukankan      html  css  js  c++  java
  • 几个漂亮的 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-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>
    
    
  • 相关阅读:
    织梦标签调用:根据特定需求调用文章的标签代码
    织梦DedeCMS信息发布员发布文章阅读权限不用审核自动开放亲测试通过!
    javascript中的this和e.target的深入研究
    vue-cli入门(二)——项目结构
    Mysql千万级大数据量查询优化
    MySQL大数据量分页查询方法及其优化
    Spring Bean的生命周期分析
    多线程下,两个线程交替打印0 -100,使用wait()和notify()
    ReentrantLock
    多线程交替打印ABC的多种实现方法
  • 原文地址:https://www.cnblogs.com/kevin2013/p/1762868.html
Copyright © 2011-2022 走看看