クリックしたら波紋のように広がるレイヤー

<label class="menuWrap">
  <input type="checkbox">
  <span class="menu">
    <span class="menuBtn"></span>
  </span>
  <div class="openTxt">
    <p>OPEN</p>
  </div>
</label>
<p class="closeTxt">CLOSE</p>

/* reset */
@import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');

/* setting */
body {
  background: #d8e698;
}
.closeTxt{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.menuWrap .menu {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 100;
  width: 60px;
  height: 60px;
  background: #FFF;
  border-radius: 50%;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
  cursor: pointer;
}
.menuWrap .menuBtn {
  position: absolute;
  top: 30px;
  left: 15px;
  width: 30px;
  height: 3px;
  background: #316745;
  display: block;
  transform-origin: center;
  transition: 0.5s ease-in-out;
}
.menuWrap .menuBtn:after,
.menuWrap .menuBtn:before {
  transition: 0.5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #316745;
}
.menuWrap .menuBtn:before {
  top: -10px;
}
.menuWrap .menuBtn:after {
  bottom: -10px;
}
.menuWrap input {
  display: none;
}
.menuWrap input:checked + .menu {
  box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;
  border-radius: 0;
}
.menuWrap input:checked + .menu .menuBtn {
  transform: rotate(45deg);
}
.menuWrap input:checked + .menu .menuBtn:after {
  transform: rotate(90deg);
  bottom: 0;
}
.menuWrap input:checked + .menu .menuBtn:before {
  transform: rotate(90deg);
  top: 0;
}
.menuWrap input:checked + .menu + .openTxt {
  opacity: 1;
}
.menuWrap .openTxt {
  z-index: 200;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.25s 0s ease-in-out;
}