<div class="cntr">
	<div class="cntr-innr">
	  <div class="menu-toggle">
			<div class="bar"></div>
			<div class="bar"></div>
			<div class="bar"></div>
		</div>
		<p>Hover to see the magic.</p>
	</div>
</div>

/*** COLORS ***/
@bg-color: #F26F70;
@txt-color: #FFFFFF;
@box-color: #FFFFFF;
@bar-color: #F26F70;

/*** DEMO ***/
html,body{height:100%;margin:0;}body{background:@bg-color;font:13px monospace;color:@txt-color}p{margin-top:20px}.cntr{display:table;width:100%;height:100%;.cntr-innr{display:table-cell;text-align:center;vertical-align:middle}}

/*** STYLES ***/
.menu-toggle {
	display: inline-block;
	position: relative;
	width: 51px;
	height: 51px;
	background: @box-color;
	cursor: pointer;
	
	.bar {
		position: absolute;
		width: 41px;
		height: 5px;
		background: @bar-color;
		transition: all 300ms ease;
		
		&:nth-child(1) {
			left: 5px;
			top: 10px;
		}
		
		&:nth-child(2) {
			left: 5px;
			top: 23px;
			
			&:after {
				content: "";
				position: absolute;
				left: 0px;
				top: 0px;
				width: 41px;
				height: 5px;
				background: @bar-color;
				transition: all 300ms ease;
			}
		}
		
		&:nth-child(3) {
			right: 5px;
			top: 36px;
		}
	}
	
	&:hover {
		.bar {
			&:nth-child(1),
			&:nth-child(3){
				width: 0;
			}
		
			&:nth-child(2) {
				transform: rotate(-45deg);
				
				&:after {
					transform: rotate(-90deg);
				}
			}
		}
	}
}