button.html

button

<div class="btn_mnu">
	<div class="btn_row"></div>
	<div class="btn_row"></div>
	<div class="btn_row"></div>
</div>

<style>
.btn_mnu {
	width: 50px;
	height: 50px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: tomato;
	cursor: pointer;
	position: relative;
}
.btn_row {
	height: 2px;
	width: 60%;
	margin: 2px 0;
	background-color: #fff;
	position: relative;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.btn_mnu.active .btn_row:first-child {
	-webkit-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
	top: 6px;
}
.btn_mnu.active .btn_row:last-child {
	-webkit-transform: rotate(-225deg);
	-ms-transform: rotate(-225deg);
	-o-transform: rotate(-225deg);
	transform: rotate(-225deg);
	top: -6px;
}
.btn_mnu.active .btn_row:nth-child(2) {
	opacity: 0;
}
</style>

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(".btn_mnu").click(function() {
	$(this).toggleClass("active");
});
</script>