zoukankan      html  css  js  c++  java
  • button的好样式

    .button {  display: inline-block;  white-space: nowrap;  background-color: #ccc;  background-image: -webkit-gradient(linear, left top, left bottom, from(#eee),   to(#ccc) );  background-image: -webkit-linear-gradient(top, #eee, #ccc);  background-image: -moz-linear-gradient(top, #eee, #ccc);  background-image: -ms-linear-gradient(top, #eee, #ccc);  background-image: -o-linear-gradient(top, #eee, #ccc);  background-image: linear-gradient(top, #eee, #ccc);  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',   EndColorStr='#cccccc' );  border: 1px solid #777;  padding: 0 1.5em;  margin: 0.5em;  font: bold 1em/2em Arial, Helvetica;  text-decoration: none;  color: #333;  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);  -moz-border-radius: .2em;  -webkit-border-radius: .2em;  border-radius: .2em;  -moz-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0   rgba(0, 0, 0, .3);  -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0   rgba(0, 0, 0, .3);  box-shadow: 0 0 1px 1px rgba(255, 255, 255, .8) inset, 0 1px 0   rgba(0, 0, 0, .3); }

    .button:hover {  background-color: #ddd;  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa),   to(#ddd) );  background-image: -webkit-linear-gradient(top, #fafafa, #ddd);  background-image: -moz-linear-gradient(top, #fafafa, #ddd);  background-image: -ms-linear-gradient(top, #fafafa, #ddd);  background-image: -o-linear-gradient(top, #fafafa, #ddd);  background-image: linear-gradient(top, #fafafa, #ddd);  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',   EndColorStr='#dddddd' ); }

    .button:active {  -moz-box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;  box-shadow: 0 0 4px 2px rgba(0, 0, 0, .3) inset;  position: relative;  top: 1px; }

    .button:focus {  outline: 0;  background: #fafafa; }

    .button:before {  background: #ccc;  background: r  gba(0, 0, 0, .1);  float: left;   1em;  text-align: center;  font-size: 1.5em;  margin: 0 1em 0 -1em;  padding: 0 .2em;  -moz-box-shadow: 1px 0 0 rgba(0, 0, 0, .5), 2px 0 0   rgba(255, 255, 255, .5);  -webkit-box-shadow: 1px 0 0 rgba(0, 0, 0, .5), 2px 0 0   rgba(255, 255, 255, .5);  box-shadow: 1px 0 0 rgba(0, 0, 0, .5), 2px 0 0 rgba(255, 255, 255, .5);  -moz-border-radius: .15em 0 0 .15em;  -webkit-border-radius: .15em 0 0 .15em;  border-radius: .15em 0 0 .15em; }

  • 相关阅读:
    iOS项目之自定义斜向文字标签
    iOS进阶之两个模型数组的去重方法
    iOS进阶之正则表达式
    iOS项目之使用开关控制日志输出的功能
    iOS进阶之UDP代理鉴权过程
    990元外贸企业建站方案
    ¥990起,性价比最高的建站服务。
    PHP调用WEBSERVICE接口常见问题答疑以及总结
    Python消息队列工具 Python-rq 中文教程
    电商网站的用户停留时间越长越好吗?我看未必。
  • 原文地址:https://www.cnblogs.com/lcuzhanglei/p/2596777.html
Copyright © 2011-2022 走看看