<div class="cp_hmenuac10">
	<span class="cp_bar1st"></span>
	<span class="cp_bar2nd"></span>
	<span class="cp_bar3rd"></span>
	<span class="cp_text">menu</span>
</div>

.cp_hmenuac10 {
	position: absolute;
	width: 40px;
	height: 20px;
	padding: 1.5em;
	cursor: pointer;
}
.cp_hmenuac10 .cp_bar1st,
.cp_hmenuac10 .cp_bar2nd,
.cp_hmenuac10 .cp_bar3rd {
	position: absolute;
	width: 40px;
	height: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	        transition: all 0.5s ease-in-out;
	border-radius: 5px;
	background: #00acc1;
}
.cp_hmenuac10 .cp_bar1st {
	top: 21px;
}
.cp_hmenuac10 .cp_bar2nd {
	top: 50%;
	-webkit-transition: opacity 0.3s ease-in-out;
	        transition: opacity 0.3s ease-in-out;
	transform: translateY(-50%);
}
.cp_hmenuac10 .cp_bar3rd {
	bottom: 21px;
}
.cp_hmenuac10 .cp_text {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.3s ease-in-out;
	        transition: opacity 0.3s ease-in-out;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	opacity: 0;
	color: #00acc1;
}
.cp_hmenuac10:hover .cp_bar1st {
	top: 8px;
}
.cp_hmenuac10:hover .cp_bar3rd {
	bottom: 8px;
}
.cp_hmenuac10:hover .cp_bar2nd {
	opacity: 0;
}
.cp_hmenuac10:hover .cp_text {
	opacity: 1;
}