CSS

html

<div class="openbtn1"><span></span><span></span><span></span></div>

CSS

/*==================================================
5-2-1 3本線が×に
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
	.openbtn1 {
	position: relative;/*ボタン内側の基点となるためrelativeを指定*/
	background:#57a2c7;
	cursor: pointer;
	width: 50px;
	height:50px;
	border-radius: 5px;
}

/*ボタン内側*/
.openbtn1 span {
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background: #fff;
	width: 45%;
}
.openbtn1 span:nth-of-type(1) {
	top:15px;
}
.openbtn1 span:nth-of-type(2) {
	top:23px;
}
.openbtn1 span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると線が回転して×に*/
.openbtn1.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}

/*真ん中の線は透過*/
.openbtn1.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn1.active span:nth-of-type(3) {
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}

/*========= レイアウトのためのCSS ===============*/
body {
	background:#f3f3f3;
	padding:20px;
}

a {
	color: #333;
	text-decoration: none;
}

.lead {
	margin:20px 0 0 0;
}

.btn-block {
	width:200px;
	padding: 30px;
}

JS

$(".openbtn1").click(function () {
	$(this).toggleClass('active');
});

引用元：https://coco-factory.jp/ugokuweb/move01/5-2-1/