zent/css/button.css

一套前端设计语言和基于React的实现

.zent-btn {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 2px;
  font-size: 12px;
  font-family: inherit;
  color: #333;
  background: #fff;
  border: 1px solid #bbb;
  text-align: center;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s
}
.zent-btn:focus {
  outline: none;
}
.zent-btn:link, .zent-btn:visited, .zent-btn:focus {
  color: #333;
  text-decoration: none;
}
.zent-btn:hover {
  color: #59f;
  border-color: #59f;
  text-decoration: none;
}
.zent-btn:active {
  color: #333;
  background: #e5e5e5;
  border-color: #bbb;
  text-decoration: none;
}
.zent-btn.zent-btn-loading:hover, .zent-btn.zent-btn-loading:active {
  background: #fff;
  border: 1px solid #bbb;
}
.zent-btn + .zent-btn {
  margin-left: 10px;
}
/* 大小相关 */
.zent-btn-large {
  height: 36px;
  line-height: 34px;
  padding: 0 30px;
}
.zent-btn-small {
  height: 26px;
  line-height: 24px;
  padding: 0 5px;
}
.zent-btn-block {
  display: block;
  width: 100%;
  padding: 0;
}
/* 风格相关 */
.zent-btn-primary {
  color: #fff;
  background: #38f;
  border-color: #38f
}
.zent-btn-primary:link, .zent-btn-primary:visited, .zent-btn-primary:focus {
  color: #fff;
}
.zent-btn-primary:hover {
  color: #fff;
  background: #59f;
  border-color: #59f;
}
.zent-btn-primary:active {
  color: #fff;
  background: #27f;
  border-color: #27f;
}
.zent-btn-primary.zent-btn-loading:hover, .zent-btn-primary.zent-btn-loading:active {
  background: #38f;
  border-color: #38f;
}
.zent-btn-primary.zent-btn-loading::after {
  border-color: #fff transparent transparent transparent;
}
.zent-btn-primary-outline {
  color: #38f;
  border-color: #38f;
  background: #fff
}
.zent-btn-primary-outline:link, .zent-btn-primary-outline:visited, .zent-btn-primary-outline:focus {
  color: #38f;
}
.zent-btn-primary-outline:hover {
  color: #59f;
  border-color: #59f;
}
.zent-btn-primary-outline:active {
  color: #27f;
  background: #e5e5e5;
  border-color: #27f;
}
.zent-btn-primary-outline.zent-btn-loading:hover, .zent-btn-primary-outline.zent-btn-loading:active {
  border-color: #38f;
  background: #fff;
}
.zent-btn-primary-outline.zent-btn-loading::after {
  border-color: #38f transparent transparent transparent;
}
.zent-btn-danger {
  color: #fff;
  background: #f44;
  border-color: #f44
}
.zent-btn-danger:link, .zent-btn-danger:visited, .zent-btn-danger:focus {
  color: #fff;
}
.zent-btn-danger:hover {
  color: #fff;
  background: #f66;
  border-color: #f66;
}
.zent-btn-danger:active {
  color: #fff;
  background: #e33;
  border-color: #e33;
}
.zent-btn-danger.zent-btn-loading:hover, .zent-btn-danger.zent-btn-loading:active {
  background: #f44;
  border-color: #e33;
}
.zent-btn-danger.zent-btn-loading::after {
  border-color: #fff transparent transparent transparent;
}
.zent-btn-danger-outline {
  color: #f44;
  border-color: #f44;
  background: #fff
}
.zent-btn-danger-outline:link, .zent-btn-danger-outline:visited, .zent-btn-danger-outline:focus {
  color: #f44;
}
.zent-btn-danger-outline:hover {
  color: #f66;
  border-color: #f66;
}
.zent-btn-danger-outline:active {
  color: #e33;
  background: #e5e5e5;
  border-color: #e33;
}
.zent-btn-danger-outline.zent-btn-loading:hover, .zent-btn-danger-outline.zent-btn-loading:active {
  border-color: #f44;
  background: #fff;
}
.zent-btn-danger-outline.zent-btn-loading::after {
  border-color: #f44 transparent transparent transparent;
}
.zent-btn-success {
  color: #fff;
  background: #4b0;
  border-color: #4b0
}
.zent-btn-success:link, .zent-btn-success:visited, .zent-btn-success:focus {
  color: #fff;
}
.zent-btn-success:hover {
  color: #fff;
  background: #6c2;
  border-color: #6c2;
}
.zent-btn-success:active {
  color: #fff;
  background: #0a0;
  border-color: #0a0;
}
.zent-btn-success.zent-btn-loading:hover, .zent-btn-success.zent-btn-loading:active {
  background: #4b0;
  border-color: #0a0;
}
.zent-btn-success.zent-btn-loading::after {
  border-color: #fff transparent transparent transparent;
}
.zent-btn-success-outline {
  color: #4b0;
  border-color: #4b0;
  background: #fff
}
.zent-btn-success-outline:link, .zent-btn-success-outline:visited, .zent-btn-success-outline:focus {
  color: #4b0;
}
.zent-btn-success-outline:hover {
  color: #6c2;
  border-color: #6c2;
}
.zent-btn-success-outline:active {
  color: #0a0;
  background: #e5e5e5;
  border-color: #0a0;
}
.zent-btn-success-outline.zent-btn-loading:hover, .zent-btn-success-outline.zent-btn-loading:active {
  border-color: #4b0;
  background: #fff;
}
.zent-btn-success-outline.zent-btn-loading::after {
  border-color: #4b0 transparent transparent transparent;
}
/* 状态相关 */
.zent-btn-disabled, .zent-btn-disabled[disabled] {
  color: #bbb;
  background: #f8f8f8;
  border-color: #e5e5e5;
  cursor: not-allowed
}
.zent-btn-disabled:link, .zent-btn-disabled:visited, .zent-btn-disabled:focus, .zent-btn-disabled[disabled]:link, .zent-btn-disabled[disabled]:visited, .zent-btn-disabled[disabled]:focus {
  color: #bbb;
}
.zent-btn-disabled:hover, .zent-btn-disabled[disabled]:hover {
  color: #bbb;
  background: #f8f8f8;
  border-color: #e5e5e5;
}
.zent-btn-disabled:active, .zent-btn-disabled[disabled]:active {
  color: #bbb;
  background: #f8f8f8;
  border-color: #e5e5e5;
}
.zent-btn-loading {
  position: relative;
  color: transparent;
  cursor: not-allowed
}
.zent-btn-loading:link, .zent-btn-loading:visited, .zent-btn-loading:focus, .zent-btn-loading:hover, .zent-btn-loading:active {
  color: transparent;
}
.zent-btn-loading::before, .zent-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  border: 3px solid;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.zent-btn-loading::after {
  border-color: #666 transparent transparent;
  -webkit-animation: btn-spin 0.6s linear;
  animation: btn-spin 0.6s linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes btn-spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes btn-spin {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.zent-btn-border-transparent {
  border-color: transparent
}
.zent-btn-border-transparent:hover {
  border-color: transparent;
}
.zent-btn-border-transparent:active {
  border-color: transparent;
}