@import url(https://fonts.googleapis.com/css?family=Roboto:700);

:root {
    --btn-width: 100%;
}

.button {
    font-size: medium;
    font-weight: bold;
    width : var(--btn-width);
    height : 50px;
    overflow: hidden;
    text-align : center;
    transition : .2s;
    cursor : pointer;
    border-radius: 3px;
    box-shadow: 0px 1px 2px rgba(0,0,0,.2);
}
.btnTwo {
    position : relative;
    width : 200px;
    height : 100px;
    margin-top: -100px;
    padding-top: 2px;
    background : rgba(0, 0, 0, 0.1);
    left : -250px;
    transition : .3s;
}
.btnText {
    color : white;
    transition : .3s;
}
.btnText2 {
    margin-top : 63px;
    margin-right : -130px;
    color : #FFF;
}
.button:hover .btnTwo{ /*When hovering over .button change .btnTwo*/
    left: -130px;
}
.button:hover .btnText{ /*When hovering over .button change .btnText*/
    margin-left : 65px;
}
.button:active { /*Clicked and held*/
    box-shadow: 0px 5px 6px rgba(0,0,0,0.3);
}

.button.error {
    background-color: var(--red);
}

.button.success {
    background: var(--green);
}

.button.info {
    background-color: #2879c550;
}

.button.wmgzon {
    background-color: orange;
}

.button.neutral {
    background-color: rgba(0, 0, 0, 0.3);
}