.button {
    z-index: 9999;
    margin-top: -12px;
    margin-left: 3px;
}

.lines {
    margin-top: 1.75rem;
}

    .lines, .lines:after, .lines:before {
        content: '';
        width: 45px;
        height: 0.5rem;
        position: relative;
        background: #fafafa;
        border-radius: 42px;
        transition: .3s;
        transform: rotate3d(0,0,1,-225deg);
    }

        .lines:after, .lines:before {
            position: absolute;
            left: 0;
            top: 0;
            transform: rotate3d(0,0,1,90deg);
        }

        .lines:before {
        }

.button:hover .lines:after, .button:hover .lines:before {
    width: 25px;
    transform-origin: 0.3 center;
    left: -3px;
}

.button:hover .lines {
    transform: rotate3d(0,0,1,0deg);
}

    .button:hover .lines:before {
        top: -0.4rem;
        transform: rotate3d(0,0,1,-40deg);
    }

    .button:hover .lines:after {
        top: 0.4rem;
        transform: rotate3d(0,0,1,40deg);
    }