<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <div class="toggle">
      <span></span>
    </div>
</body>
</html>
body {
  margin: 0;
  padding: 0;
  background: lightblue;
  transition: 2s;
}
body.active {
  background: lightcoral;
}
.toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: white;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: calc(100% - 14px);
  height: 3px;
  background: black;
  box-shadow: 0 -12px 0 black, 0 12px 0 black; 
  transition-property: transform, box-shadow;
  transition-delay: 0s, 1s;
  transition-duration: 0.5s, 0.5s;
}

.toggle.active span {
  box-shadow: 50px -12px 0 black, -50px 12px 0 black; 
  transform: translate(-50%, -50%) rotate(-315deg);
  transition-property: box-shadow, transform;
  transition-delay: 0s, .5s;
  transition-duration: 0.5s, 0.5s;
}
.toggle span:before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 36px;
  background: black;
  transition: .5s;
  transition-delay: .5s;
}
.toggle.active span:before {
  top: 50%;
  transition-delay: 1s;
}

document.addEventListener("DOMContentLoaded", function(event) { 
  var toggle = document.querySelector(".toggle");
  var body = document.querySelector("body");
  if(toggle && body) {
    toggle.addEventListener('click', function(e) {
      toggle.classList.toggle('active');
      body.classList.toggle('active');
    })
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.