ボタンの三本線がバツになるハンバーガーメニュー(CSSのみ)

<!-- チェックボックス -->
<input type="checkbox" id="open">

<!-- ボタン -->
<label for="open" class="menu-btn">
  <span class="top-bar"></span> <!--上の線-->
  <span class="center-bar"></span> <!--中の線-->
  <span class="under-bar"></span> <!--下の線-->
</label>

/*** ボタン全体 ***/
.menu-btn{
  display: block;
  position: relative;
  width: 50px; /*ボタンの幅*/
  height: 50px; /*ボタンの高さ*/
  border: 1px solid #000;
  cursor: pointer; /*クリック可能を伝える*/
}

/*** ボタンの三本線（共通） ***/
.menu-btn span{
  position: absolute;
  width: 40%; /*線の長さ*/
  height: 2px; /*線の太さ*/
  left: calc(50% - 40% / 2); /*中央から長さの半分を引く*/
  background: #000; /*線の色*/
  transition: .4s;
}

/* 上・中・下の線 */
.top-bar{
  top: calc(35% - 2px / 2); /*上から35%の位置*/ 
}
.center-bar{
  top: calc(50% - 2px / 2); /*上から50%の位置*/
}
.under-bar{
  top: calc(65% - 2px / 2); /*上から65%の位置*/
}

/** クリック後(✔が入った後)の線 **/
/*上の線*/
#open:checked ~ .menu-btn > .top-bar {
  top: calc(50% - 2px / 2); /*中央に移動*/
  transform: rotate(45deg); /*45度回転*/
}
/*中の線*/
#open:checked ~ .menu-btn > .center-bar{
  opacity: 0;/*透明*/
}
/*下の線*/
#open:checked ~ .menu-btn > .under-bar{
  top: calc(50% - 2px / 2); /*中央に移動*/
  transform: rotate(-45deg); /*-45度回転*/
}

/*** チェックボックスは非表示に ***/
#open{
  display: none;
}