burger-menu.css

/* <span class="c-burger is-active"></span> */

.c-burger {
    display: inline-block;
    width: 28px;
    padding: 0;
    border: 0;
    border-bottom: 3px solid currentColor;
    background: 0 0;
    cursor: pointer;
    color: #000
}

.c-burger:after,.c-burger:before,.c-button-1:before {
    width: 100%;
    content: ""
}

.c-burger.is-light:not(.is-active) {
    color: #bdb5b5
}

.c-burger::-moz-focus-inner {
    border: 0;
    padding: 0
}

.c-burger:after,.c-burger:before {
    display: block;
    margin-bottom: 5px;
    border-bottom: 3px solid currentColor;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out
}

.c-burger.is-active {
    border-bottom: 3px solid transparent
}

.c-burger.is-active:before {
    -webkit-transform: rotate(-405deg) translateY(0) translateX(-3px);
    -ms-transform: rotate(-405deg) translateY(0) translateX(-3px);
    transform: rotate(-405deg) translateY(0) translateX(-3px);
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out
}

.c-burger.is-active:after {
    -webkit-transform: rotate(405deg) translateY(-3px) translateX(-5px);
    -ms-transform: rotate(405deg) translateY(-3px) translateX(-5px);
    transform: rotate(405deg) translateY(-3px) translateX(-5px);
    -webkit-transition: -webkit-transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    transition: transform .5s ease-in-out,-webkit-transform .5s ease-in-out
}