Hamburger to X

<!-- Hamburger to X · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hbx-wrap"><button class="hbx" aria-label="Menu"><span class="hbx__lines"><i></i><i></i><i></i></span></button></div>
</div>

/* Hamburger to X · NedDev · eigen werk. */
.hbx-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.hbx{width:72px;height:72px;border:0;border-radius:18px;background:#141414;cursor:pointer;display:grid;place-items:center;transition:background .3s}.hbx.is-open{background:#F5480F}
.hbx__lines{position:relative;width:34px;height:24px}.hbx__lines i{position:absolute;left:0;width:100%;height:3.5px;border-radius:3px;background:#fff;transition:transform .4s cubic-bezier(.5,0,.2,1),opacity .25s}
.hbx__lines i:nth-child(1){top:0}.hbx__lines i:nth-child(2){top:50%;transform:translateY(-50%)}.hbx__lines i:nth-child(3){bottom:0}
.hbx.is-open .hbx__lines i:nth-child(1){transform:translateY(10px) rotate(45deg)}.hbx.is-open .hbx__lines i:nth-child(2){opacity:0}.hbx.is-open .hbx__lines i:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

// Hamburger to X · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var b=root.querySelector('.hbx');b.addEventListener('click',function(){b.classList.toggle('is-open');});
}
init(document.querySelector('.jouw-container'));