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