.button(){
    height:50px;
    width:100%;
    background:#00d3c9;
    color:#fff;
    text-align: center;
    line-height: 50px;
}
.buttonclick(){
    overflow: hidden;
    &:active{
        opacity: .9;
    }
    &::before{
        content:'';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        margin:auto;
        top: 0;
        left: 0;
        pointer-events: none;
        //设置径向渐变
        background-image: radial-gradient(circle  , rgba(95,148,220,.9) 50%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(.2, .2);
        opacity: 0;
        transition: transform .5s, opacity 1s;
    }
    &:active::before{
        transform: scale(10, 5);
        opacity: .4;
    }
    &::after{
        z-index: 0;
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        margin:auto;
        top: 0;
        left: 0;
        pointer-events: none;
        //设置径向渐变
        background-image: radial-gradient(circle  , rgba(95,148,220,.2) 50%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(.2, .2);
        opacity: 0;
        transition: transform .5s, opacity .1s;
    }
    &:active::after{
        transform: scale(10, 5);
        opacity: .4;
    }
}
.avatar(@w:50px,@h:50px,@t:20px,@l:20px,@b:#ddd){
    border:1px solid @b;
    padding:5px;    
    position: absolute;
    left: @l;
    top:@t;
    width:@w;
    height:@h;
    border-radius: 100%;
}
.button_1(){
    background:transparent;
    border:1px solid #2a70d0;
    box-sizing: border-box;
    border-radius: 10px;
    margin:10px;
    color:#2a70d0;
    *{
        color:#2a70d0;
    }
}