ハンバーガーメニュー

.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
	text-align: center;
	background-color: white;
}
.hamburger {
	position: relative;
	display: inline-block;
	width: 40px;
	height: 4px;
	background-color: green;
}
.hamburger::before,
.hamburger::after {
	transition: transform 0.3s;
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
}
.hamburger::before {
	background-color: red;
	transform: translateY(-12px);
}
.hamburger::after {
	background-color: blue;
	transform: translateY(12px);
}

.btn:hover .hamburger {
	background-color: transparent;
}
.btn:hover .hamburger::before {
	transform: rotate(45deg);
}
.btn:hover .hamburger::after {
	transform: rotate(-45deg);
}