.button-hover{
    text-decoration:none;
    transition:color .3s
}
.sr{
    width:0;
    height:0;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden
}
.button-hover:hover{
    text-decoration:none
}
.button-hover.big{
    padding:18px 35px;
    font-size:18px
}
.button-hover.big .hover span{
    padding:10px 0
}
.button-hover{
    border-radius:4px;
    overflow:hidden;
    font-size:16px;
    position:relative;
    display:inline-block;
    min-width:130px;
    padding:12px 15px;
    z-index:1;
    border:none;
    outline:none;
    cursor:pointer;
    color:#fff;
    text-align:center;
    line-height:normal;
    text-transform:none
}
.button-hover .hover{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:-1;
    overflow:hidden
}
.button-hover .hover span{
    position:relative;
    display:block;
    left:-15px;
    height:6px;
    width:0;
    content:''
}
.button-hover .hover span:after{
    position:absolute;
    display:block;
    right:-8px;
    width:8px;
    height:8px;
    background:rgba(255,255,255,0.4);
    content:''
}
.button-hover .hover span:nth-child(odd):after{
    background:rgba(0,0,0,0.05)
}
.button-hover .hover span:first-child{
    left:-75px;
    transition:all .3s steps(8)
}
.button-hover .hover span:nth-child(2){
    left:-45px;
    transition:all .325s steps(8)
}
.button-hover .hover span:nth-child(3){
    left:-55px;
    transition:all .35s steps(8)
}
.button-hover .hover span:nth-child(4){
    transition:all .4s steps(8)
}
.button-hover .hover span:nth-child(5){
    left:-25px;
    transition:all .25s steps(8)
}
.button-hover .hover span:nth-child(6){
    left:-45px;
    transition:all .3s steps(8)
}
.button-hover .hover span:nth-child(7){
    left:-55px;
    transition:all .375s steps(8)
}
.button-hover .hover span:nth-child(8){
    left:-25px;
    transition:all .375s steps(8)
}
.button-hover .hover span:nth-child(9){
    left:-45px;
    transition:all .325s steps(8)
}
.button-hover .hover span:nth-child(10){
    left:-55px;
    transition:all .35s steps(8)
}
.button-hover .hover span:nth-child(11){
    transition:all .4s steps(8)
}
.button-hover .hover span:nth-child(5){
    left:-25px;
    transition:all .25s steps(12)
}
.button-hover:hover{
    color:#fff
}
.button-hover:hover,.button-hover:focus{
    color:#fff
}
.button-hover:hover .hover span:first-child,.button-hover:focus .hover span:first-child{
    width:calc(100% + 76px)
}
.button-hover:hover .hover span:first-child:after,.button-hover:focus .hover span:first-child:after{
    animation: whiteBlack .3s;
}
.button-hover:hover .hover span:nth-child(2),.button-hover:focus .hover span:nth-child(2){
    width:calc(100% + 46px);
    transition:all .375s steps(8)
}
.button-hover:hover .hover span:nth-child(2):after,.button-hover:focus .hover span:nth-child(2):after{
    animation:whiteBlack .3s .06s 1 reverse backwards
}
.button-hover:hover .hover span:nth-child(3),.button-hover:focus .hover span:nth-child(3){
    width:calc(100% + 56px);
    transition:all .35s steps(8)
}
.button-hover:hover .hover span:nth-child(3):after,.button-hover:focus .hover span:nth-child(3):after{
    animation:whiteBlack .3s .05s 1 forwards
}
.button-hover:hover .hover span:nth-child(4),.button-hover:focus .hover span:nth-child(4){
    width:calc(100% + 46px);
    transition:all .3s steps(8)
}
.button-hover:hover .hover span:nth-child(4):after,.button-hover:focus .hover span:nth-child(4):after{
    animation:whiteBlack .3s 0 reverse backwards;
}
.button-hover:hover .hover span:nth-child(5),.button-hover:focus .hover span:nth-child(5){
    width:calc(100% + 54px);
    transition:all .325s steps(8)
}
.button-hover:hover .hover span:nth-child(5):after,.button-hover:focus .hover span:nth-child(5):after{
    animation:whiteBlack .3s .07s 1 forwards
}
.button-hover:hover .hover span:nth-child(6),.button-hover:focus .hover span:nth-child(6){
    width:calc(100% + 54px);
    transition:all .325s steps(8)
}
.button-hover:hover .hover span:nth-child(6):after,.button-hover:focus .hover span:nth-child(6):after{
    animation:whiteBlack .3s .08s 1 forwards
}
.button-hover:hover .hover span:nth-child(7),.button-hover:focus .hover span:nth-child(7){
    width:calc(100% + 55px);
    transition:all .35s steps(8)
}
.button-hover:hover .hover span:nth-child(7):after,.button-hover:focus .hover span:nth-child(7):after{
    animation:whiteBlack .3s .085s 1 forwards
}
.button-hover:hover .hover span:nth-child(8),.button-hover:focus .hover span:nth-child(8){
    width:calc(100% + 55px);
    transition:all .35s steps(8)
}
.button-hover:hover .hover span:nth-child(8):after,.button-hover:focus .hover span:nth-child(8):after{
    animation:whiteBlack .3s .085s 1 forwards
}
.button-hover:hover .hover span:nth-child(9):after,.button-hover:focus .hover span:nth-child(9):after{
    animation:whiteBlack .3s .06s 1 reverse backwards
}
.button-hover:hover .hover span:nth-child(9),.button-hover:focus .hover span:nth-child(9){
    width:calc(100% + 56px);
    transition:all .35s steps(8)
}
.button-hover:hover .hover span:nth-child(10):after,.button-hover:focus .hover span:nth-child(10):after{
    animation:whiteBlack .3s .05s 1 forwards
}
.button-hover:hover .hover span:nth-child(10),.button-hover:focus .hover span:nth-child(10){
    width:calc(100% + 46px);
    transition:all .3s steps(8)
}
.button-hover:hover .hover span:nth-child(11):after,.button-hover:focus .hover span:nth-child(11):after{
    animation:whiteBlack .3s 0 reverse backwards;
}
.button-hover:hover .hover span:nth-child(11),.button-hover:focus .hover span:nth-child(11){
    width:calc(100% + 60px);
    transition:all .325s steps(8)
}
.button-hover:hover .hover span:nth-child(12):after,.button-hover:focus .hover span:nth-child(12):after{
    animation:whiteBlack .3s .085s 1 forwards
}
.button-hover:hover .hover span:nth-child(12),.button-hover:focus .hover span:nth-child(12){
    width:calc(100% + 55px);
    transition:all .35s steps(8)
}
.button-hover.yellow{
    background:#FFB500
}
.button-hover.yellow span,.button-hover.yellow:after{
    background:#ffa532
}
.button-hover.red{
    background:#ff5747
}
.button-hover.red span,.button-hover.red:after{
    background:#d24b3e
}
.button-hover.green{
    background:#2bdc33
}
.button-hover.green span,.button-hover.green:after{
    background:#23b32a
}
.button-hover.blue{
    background:#10087d
}
.button-hover.blue span,.button-hover.blue:after{
    background:#180ea2
}
@-webkit-keyframes whiteBlack{
    0%,24%{
        background:rgba(255,255,255,0.3)
    }
    25%,49%{
        background:rgba(0,0,0,0.35)
    }
    50%,74%{
        background:rgba(255,255,255,0.3)
    }
    75%,100%{
        background:rgba(0,0,0,0.35)
    }
}
@-moz-keyframes whiteBlack{
    0%,24%{
        background:rgba(255,255,255,0.3)
    }
    25%,49%{
        background:rgba(0,0,0,0.05)
    }
    50%,74%{
        background:rgba(255,255,255,0.3)
    }
    75%,100%{
        background:rgba(0,0,0,0.05)
    }
}
@-ms-keyframes whiteBlack{
    0%,24%{
        background:rgba(255,255,255,0.3)
    }
    25%,49%{
        background:rgba(0,0,0,0.05)
    }
    50%,74%{
        background:rgba(255,255,255,0.3)
    }
    75%,100%{
        background:rgba(0,0,0,0.05)
    }
}
@keyframes whiteBlack{
    0%,24%{
        background:rgba(255,255,255,0.3)
    }
    25%,49%{
        background:rgba(0,0,0,0.05)
    }
    50%,74%{
        background:rgba(255,255,255,0.3)
    }
    75%,100%{
        background:rgba(0,0,0,0.05)
    }
}