清新风格按钮纯CSS效果

1. 清新风格按钮纯CSS效果（供源码下载）

   发表于  2012 年 2 月 15 日

   CSS3的属性大家都十分熟悉，虽然ie不支持这些效果，但随着移动互联网的迅速发展，很多web应用都是由HTML5和CSS3打造，所以CSS3将影响未来WEB UI的质量和效率，下面是我利用业余时间做的清新风格纯CSS按钮，分为红、蓝、绿、灰4种常用颜色，a/a:hover/a:active 3种状态，喜欢的朋友可以打包带走，下面请看效果演示。

   button button button button

   
   
   下载Solid-button
   
   

       
       
   .btn{
      display:inline-block;
      text-decoration:none;
      font-size:14px;
      font-weight:bold;
      color:#fff;
      color:rgba(255,255,255,1);
      padding:0.5em 1em;
      margin:0.5em;
   }
   .solid{
      border-style:solid;
      border-width:1px;
      border-radius:4px;
      box-shadow:0 1px 1px rgba(255,255,255,0.5) inset;
   }
   .solid:hover{
      box-shadow:0 1px 1px rgba(255,255,255,0.5) inset,0 0 2px rgba(0,0,0,0.2);
      opacity:0.9;
   }
   .solid:active{
      box-shadow:0px 0px 6px 0px rgba(0,0,0,0.4) inset;
      opacity:1;
      color:rgba(255,255,255,0.5);
   }
   .red{
      background:#da4d42;
      background:rgba(218,77,66,1);
      border-color:#a44f36;
      border-color:rgba(164,79,54,1);
   }
   .blue{
      background:#4297da;
      background:rgba(66,151,218,1);
      border-color:#3663a4;
      border-color:rgba(54,99,164,1);
   }
   .green{
      background:#95da42;
      background:rgba(149,218,66,1);
      border-color:#61a436;
      border-color:rgba(97,164,54,1);
   }
   .grey{
      background:#f2f2f2;
      background:rgba(0,0,0,0.05);
      border-color:#eee;
      border-color:rgba(0,0,0,0.1);
      color:#999;
      color:rgba(0,0,0,0.5);
   }
   .grey:active{
      box-shadow:0px 0px 6px 0px rgba(0,0,0,0.1) inset;
      opacity: 1;
      color:rgba(0,0,0,0.2);
   }

   浏览:1,712  分类: CSS、Web | 标签: button、css、UI、按钮 
   本站文章如未注明均为shanks原创 转载请注明 转自:清新风格按钮纯CSS效果（供源码下载）-imshanks.com