<div class="container">
	<div class="btn play">
		<span class="bar bar-1"></span>
		<span class="bar bar-2"></span>				
	</div>
</div>

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: rgb(231,76,60);
background: -moz-linear-gradient(-45deg,  rgba(231,76,60,1) 0%, rgba(211,84,0,1) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(231,76,60,1) 0%,rgba(211,84,0,1) 100%);
background: linear-gradient(135deg,  rgba(231,76,60,1) 0%,rgba(211,84,0,1) 100%);
}

.container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.btn {
	position: relative;
	width: 40px;
	height: 40px;
	border: white 3px solid;
	border-radius: 3px;
	cursor: pointer;
	transition: border 0.1s ease-in-out;
	
	&:hover {
		border: #333 3px solid;
		.bar {
			background-color: #333;	
		}
	}
	
	.bar {
		display: inline-block;
		position: absolute;
		top: 10px;
		left: 0;
		width: 3px;
		height: 20px;
		border-radius: 3px;
		background-color: white;
		transform-origin: center;
		transition: transform 0.4s ease-in-out, background 0.1s ease-in-out;
	}
	
	&.pause {
		.bar-1 {
			transform: translateX(13.5px) translateY(0px) rotate(0deg);
		}
		.bar-2 {
			transform: translateX(24px) translateY(0px) rotate(0deg);
		}
	}
	
	&.play {
		.bar-1 {
			transform: translateX(20px) translateY(-5px) rotate(-55deg);
		}
		.bar-2 {
			transform: translateX(20px) translateY(5px) rotate(-125deg);
		}
	}
	
}

/*

   \  |  _ \            _)                   
  |\/ |  |  |  -_) (_-<  |   _` |    \  (_-< 
 _|  _| ___/ \___| ___/ _| \__, | _| _| ___/ 
                           ____/             		 

*/

$('body').on('click', '.btn', function(e){
	e.preventDefault();
	if ( $(this).hasClass('play') ) {
		$(this).removeClass('play');
		$(this).addClass('pause');
	} else {
		$(this).removeClass('pause');
		$(this).addClass('play');
	}
});

// ===========================================
// Play/Pause button by Mário Duarte
// (╭☞ ͡ ͡°͜ ʖ ͡ ͡°)╭☞
// Thanks for stoping by, don't forget to like
// and follow to stay up to date with new 
// doodles and cools stuff
// Twitter: https://twitter.com/MDesignsuk
//  (づ｡◕‿‿◕｡)づ
// ===========================================