.ct-button {
    position: relative;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 14px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 20px;
    border-width: 1px;
    border-style:solid; 
    -webkit-appearance: none;
    -webkit-text-size-adjust: 100%;
    transition: all ease-out .3s ;
    -webkit-transition: all ease-out .3s ;
    -moz-transition: all ease-out .3s ;  
    border-color:$border-color;
    background: #fff;
    color: #7b7b7b;    
    &:focus,&:hover {
        color: $primary-o-bg;
        border-color: $primary-o-bg;
    }
    &.is-loading{
        &::before,&:hover::before,&:focus::before {
            content: "";
            display: block;
            position: absolute;
            top: -1px;
            left: -2px;
            right: -1px;
            bottom: -1px;
            background: hsla(0,0%,100%,.35);
        }
    }
    &.border-dashed {border-style: dashed;}
    &.border-dotted {border-style: dotted;}
    //圆角
    &.dis-round {
      border-radius: 20px;
    }
    //颜色
    //primary
    &.ct-button__primary {
        color: #fff;
        background: $primary-bg;
        border-color: $primary-bg;
        &:focus,&:hover {
            background: $primary-o-bg;
            border-color: $primary-o-bg;
        }
        &.is-plain {
            color: $primary-bg;
            background:#fff;
            border-color: $primary-bg;
            &:focus,&:hover {
                background: rgba(255,255,255,.5);
                color: $primary-o-bg;
                border-color: $primary-o-bg;
            }
        }
    }
    //success
    &.ct-button__success {
        color: #fff;
        background:$success-bg;
        border-color:$success-bg;
        &:focus,&:hover {
            background:$success-o-bg;
            border-color: $success-o-bg;
        }
        &.is-plain {
            color: $success-bg;
            background: #fff;
            border-color: $success-bg;
            &:focus,&:hover {
                color: $success-o-bg;
                background: rgba(255,255,255,.5);
                border-color:$success-o-bg;
            }
        }
    }
    //warning
    &.ct-button__warning {
        background:$warning-bg;
        border-color: $warning-bg;
        color: #fff; 
        &:focus,&:hover {
            background: $warning-o-bg;
            border-color: $warning-o-bg;
        }
        &.is-plain {
            background:#fff;
            border-color: $warning-bg;
            color: $warning-bg;
            &:focus,&:hover {
                background:rgba(255,255,255,.5);
                border-color: $warning-o-bg;
                color: $warning-o-bg; 
            }
        }
    }
    //erro
    &.ct-button__erro {
        background: $error-bg;
        border-color: $error-bg;
        color: #fff;
        &:focus,&:hover {
            background: $error-o-bg;
            border-color: $error-o-bg;
        }
        &.is-plain {
            background: #fff;
            border-color: $error-bg;
            color: $error-bg;
            &:focus,&:hover {
                background: rgba(255,255,255,.5);
                border-color: $error-o-bg;
                color: $error-o-bg;
            }
        }
    }
    //info 
    &.ct-button__info {
        background: $info-bg;
        border-color: $info-bg;
        color: #fff;
        &:focus,&:hover { 
            background:$info-o-bg;
            border-color:$info-o-bg;
        }
        &.is-plain {
            background:#fff;
            border-color: $info-bg;
            color: $info-bg;
            &:hover,&:focus {
                background: rgba(255,255,255,.5);
                border-color: $info-o-bg;
                color: $info-o-bg;
            }
        }
    }
    //text
    &.ct-button__text {
        border:none;
        background-color: #fff;
        color: #596172;
        &:focus,&:hover {
            color: #007aff;
        }
    }
    //尺寸
    &.ct-button__small {
        padding: 1px 8px;
        font-size: 12px;
        height: 24px;
        line-height: 12px;
        .is-round {
            border-radius: 15px;
            padding: 3px 7px;
        }
    }
    &.ct-button__large {
      height: 36px;
      line-height: 8px;
      padding: 10px 10px;
      font-size: 16px;
      .is-round  {
        border-radius: 30px;
      }
    }
    /**
    * 禁止
    **/
    &.is-disabled,&.is-disabled:focus,&.is-disabled:hover {
        color: #8c8c8c;
        border-color: #d4d7dd;
        background-color: #f8f8f8; 
        cursor: not-allowed;
    }
    &.ct-button__text {
        .is-disabled {
            background-color: transparent;
            &:hover,&:focus {
                background-color: transparent;
            }
        }
    }
    
}
.ct-button-group {
    &::before,&::after {
        display: table;
        content: "";
    }
    &::after {
        clear: both;
    }
    .ct-button {
        float: left;
        border-radius: 0;
        border-right: 1px solid $border-color;
        &:first-child {
            border-radius: 3px 0 0 3px;
        }
        &:last-child {
            border-radius: 0 3px 3px  0;
        }
    }
    &.is-vertical {
        .ct-button {
            display: block;
            float: unset;
            border-bottom: 1px solid $border-color;
            &:first-child {
                border-radius: 3px 3px 0 0;
            }
            &:last-child {
                border-radius:  0 0 3px 3px;
            }
        }
    }
    &.dis-round {
        .ct-button {
            border-radius: 0;
        }
    }
}