JSFiddle - React, Tailwind, and code Playground

by Dmitriy Shvanyk

HTML

<button class="b-toggle b-toggle--click"></button>

CSS

.b-toggle{
	cursor: pointer;
	border: 1px solid #f00;
	width: 40px;
	height: 40px;
	position: relative;
	background: none;	
}
.b-toggle:before,
.b-toggle:after{
	content: '';
  width: 20px;
  height: 5px;
  background-color: #333;
  position: absolute; top: 50%; left: 0;
	transform: rotate(35deg);
	margin-top: -2.5px;
  transition: .4s;
}
.b-toggle:before{
	margin-top: 3px;
	left: 3px;
}
.b-toggle:after{
	width: 30px;
	left: 12px;
	transform: rotate(-60deg);
}
.b-toggle--click:before,
.b-toggle--click:after{
	left: 50%;
	width: 40px;
	margin: -2.5px 0 0 -20px;
	transform: rotate(45deg);
}
.b-toggle--click:after{
	transform: rotate(-45deg);	
}

JavaScript

(function(){
	
	'use strict';

	let b = document.querySelector('.b-toggle');

	b.addEventListener('click', function(e){
		e.preventDefault();
		this.classList.toggle('b-toggle--click');
	});
	
})();