zent/button/lib/index.css

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

.zent-btn {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 2px;

    font-size: 12px;

    color: #333;
    background: #fff;
    border: 1px solid #bbb;

    text-align: center;

    vertical-align: middle;
    box-sizing: border-box;
    cursor: pointer;

    -webkit-transition: background-color 0.3s;

    transition: background-color 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: #276ACC;
    border-color: #276ACC;
    text-decoration: none
}
.zent-btn:active {
    color: #333;
    background: #e5e5e5;
    border-color: #bbb;
    text-decoration: none
}
.zent-btn.zent-btn-loading {}
.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: #3283fa;
    border-color: #3283fa
}
.zent-btn-primary:link, .zent-btn-primary:visited, .zent-btn-primary:focus {
    color: #fff
}
.zent-btn-primary:hover {
    color: #fff;
    background: #66a3ff;
    border-color: #2e7df1
}
.zent-btn-primary:active {
    color: #fff;
    background: #276ACC;
    border-color: #2e7df1
}
.zent-btn-primary.zent-btn-loading {}
.zent-btn-primary.zent-btn-loading:hover, .zent-btn-primary.zent-btn-loading:active {
    background: #3283fa;
    border-color: #3283fa
}
.zent-btn-primary.zent-btn-loading::after {
    border-color: #fff transparent transparent transparent
}
.zent-btn-primary-outline {
    color: #3283fa;
    border-color: #3283fa;
    background: #fff
}
.zent-btn-primary-outline:link, .zent-btn-primary-outline:visited, .zent-btn-primary-outline:focus {
    color: #3283fa
}
.zent-btn-primary-outline:hover {
    color: #276ACC;
    border-color: #276ACC
}
.zent-btn-primary-outline:active {
    color: #276ACC;
    background: #e5e5e5;
    border-color: #3283fa
}
.zent-btn-primary-outline.zent-btn-loading {}
.zent-btn-primary-outline.zent-btn-loading:hover, .zent-btn-primary-outline.zent-btn-loading:active {
    border-color: #3283fa;
    background: #fff
}
.zent-btn-primary-outline.zent-btn-loading::after {
    border-color: #3283fa transparent transparent transparent
}
.zent-btn-danger {
    color: #fff;
    background: #ff4343;
    border-color: #f63535
}
.zent-btn-danger:link, .zent-btn-danger:visited, .zent-btn-danger:focus {
    color: #fff
}
.zent-btn-danger:hover {
    color: #fff;
    background: #ff6666;
    border-color: #f63535
}
.zent-btn-danger:active {
    color: #fff;
    background: #CF2F2F;
    border-color: #f63535
}
.zent-btn-danger.zent-btn-loading {}
.zent-btn-danger.zent-btn-loading:hover, .zent-btn-danger.zent-btn-loading:active {
    background: #ff4343;
    border-color: #f63535
}
.zent-btn-danger.zent-btn-loading::after {
    border-color: #fff transparent transparent transparent
}
.zent-btn-danger-outline {
    color: #ff4343;
    border-color: #ff4343;
    background: #fff
}
.zent-btn-danger-outline:link, .zent-btn-danger-outline:visited, .zent-btn-danger-outline:focus {
    color: #ff4343
}
.zent-btn-danger-outline:hover {
    color: #CF2F2F;
    border-color: #CF2F2F
}
.zent-btn-danger-outline:active {
    color: #CF2F2F;
    background: #e5e5e5;
    border-color: #ff4343
}
.zent-btn-danger-outline.zent-btn-loading {}
.zent-btn-danger-outline.zent-btn-loading:hover, .zent-btn-danger-outline.zent-btn-loading:active {
    border-color: #ff4343;
    background: #fff
}
.zent-btn-danger-outline.zent-btn-loading::after {
    border-color: #ff4343 transparent transparent transparent
}
.zent-btn-success {
    color: #fff;
    background: #06bf04;
    border-color: #00ab00
}
.zent-btn-success:link, .zent-btn-success:visited, .zent-btn-success:focus {
    color: #fff
}
.zent-btn-success:hover {
    color: #fff;
    background: #12D24D;
    border-color: #00ab00
}
.zent-btn-success:active {
    color: #fff;
    background: #0BA40A;
    border-color: #00ab00
}
.zent-btn-success.zent-btn-loading {}
.zent-btn-success.zent-btn-loading:hover, .zent-btn-success.zent-btn-loading:active {
    background: #06bf04;
    border-color: #00ab00
}
.zent-btn-success.zent-btn-loading::after {
    border-color: #fff transparent transparent transparent
}
.zent-btn-success-outline {
    color: #06bf04;
    border-color: #06bf04;
    background: #fff
}
.zent-btn-success-outline:link, .zent-btn-success-outline:visited, .zent-btn-success-outline:focus {
    color: #06bf04
}
.zent-btn-success-outline:hover {
    color: #0BA40A;
    border-color: #0BA40A
}
.zent-btn-success-outline:active {
    color: #0BA40A;
    background: #e5e5e5;
    border-color: #06bf04
}
.zent-btn-success-outline.zent-btn-loading {}
.zent-btn-success-outline.zent-btn-loading:hover, .zent-btn-success-outline.zent-btn-loading:active {
    border-color: #06bf04;
    background: #fff
}
.zent-btn-success-outline.zent-btn-loading::after {
    border-color: #06bf04 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 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    box-sizing: border-box
}
.zent-btn-loading::after {
    border-color: #666666 transparent 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
}