<button class="hamburger"><span></span></button>

<style>

html {
	color-scheme: light dark;
}

.hamburger {
	height: 25px;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.hamburger > span {
	display: block;
	position: relative;
	-webkit-transition-delay: 200ms;
	        transition-delay: 200ms;
}

.hamburger > span,
.hamburger > span::before,
.hamburger > span::after {
	width: 23px;
	height: 3px;
	border-radius: 1.5px;
	background-color: black;
}

.hamburger > span::before,
.hamburger > span::after {
	position: absolute;
	right: 0;
	left: 0;
	content: "";
	-webkit-transition: -webkit-transform 200ms, top 200ms 400ms;
	        transition:         transform 200ms, top 200ms 400ms;
}

.hamburger > span::before {
	top: -7px;
}

.hamburger > span::after {
	top: 7px;
}

.hamburger.active > span {
	background-color: transparent;
}

.hamburger.active > span::before,
.hamburger.active > span::after {
	top: 0;
	-webkit-transition: -webkit-transform 200ms 400ms, top 200ms;
	        transition:         transform 200ms 400ms, top 200ms;
}

.hamburger.active > span::before {
	-webkit-transform: rotateZ(45deg);
	        transform: rotateZ(45deg);
}

.hamburger.active > span::after {
	-webkit-transform: rotateZ(-45deg);
	        transform: rotateZ(-45deg);
}

@media (prefers-color-scheme: dark) {
	.hamburger > span,
	.hamburger > span::before,
	.hamburger > span::after {
		background-color: white;
	}
}

</style>

<script>

document.querySelector(".hamburger").addEventListener("click", function() {
	this.classList.toggle("active");
}, { passive: true });

</script>