.btn {
    position: relative;
    width: 0px;
    cursor: pointer;
    padding: 0;
    transition: all 300ms ease-in-out;
    padding: 0.375rem 0.75rem;
}

span {
    display: block;
    width: 100%;
    /* box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3); */
    border-radius: 3px;
    height: 4px;
    background: #522D6D;
    transition: all .3s;
    position: relative;
}

span+span {
    margin-top: 7px;
}

.active span:nth-child(1) {
    animation: ease .7s top forwards;
}

.not-active span:nth-child(1) {
    animation: ease .7s top-2 forwards;
}

.active span:nth-child(2) {
    animation: ease .7s scaled forwards;
}

.not-active span:nth-child(2) {
    animation: ease .7s scaled-2 forwards;
    background: #8E4895;
}

.active span:nth-child(3) {
    animation: ease .7s bottom forwards;
    background: #522D6D;
}

.not-active span:nth-child(3) {
    animation: ease .7s bottom-2 forwards;
}

@keyframes top {
    0% {
        top: 0;
        transform: rotate(0);
    }
    50% {
        top: 11px;
        transform: rotate(0);
    }
    100% {
        top: 11px;
        transform: rotate(45deg);
    }
}

@keyframes top-2 {
    0% {
        top: 11px;
        transform: rotate(45deg);
    }
    50% {
        top: 11px;
        transform: rotate(0deg);
    }
    100% {
        top: 0;
        transform: rotate(0deg);
    }
}

@keyframes bottom {
    0% {
        bottom: 0;
        transform: rotate(0);
    }
    50% {
        bottom: 11px;
        transform: rotate(0);
    }
    100% {
        bottom: 11px;
        transform: rotate(135deg);
    }
}

@keyframes bottom-2 {
    0% {
        bottom: 11px;
        transform: rotate(135deg);
    }
    50% {
        bottom: 11px;
        transform: rotate(0);
    }
    100% {
        bottom: 0;
        transform: rotate(0);
    }
}

@keyframes scaled {
    50% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes scaled-2 {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}