<input type="checkbox" role="button" aria-label="Display the menu">

input {
  --s: 30px; /* control the size */

  border: none;
  background: none;
  padding: 0;
  margin: calc(2 * var(--s)) 0;
  cursor: pointer;
  height: var(--s);
  aspect-ratio: 5/1;
  border-radius: 100px;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  box-shadow: 
    0 calc(2 * var(--s)) 0 #000, 
    0 calc(-2 * var(--s)) 0 #000;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
input:before,
input:after {
  content: "";
  position: absolute;
  inset: calc(-2 * var(--s)) 0;
  transition: 0.4s;
  background: 
    radial-gradient(farthest-side, #000 98%, #0000) 0 / var(--s) var(--s) repeat-x,
    linear-gradient(#000 0 0) 50% / calc(100% - var(--s)) var(--s) no-repeat;
}
input:focus-visible {
  outline: none;
}
input:focus-visible::before {
  outline: 1px solid;
  outline-offset: 5px;
}
input:hover {
  box-shadow: 
    0 calc(1.6 * var(--s)) 0 #000, 
    0 calc(-1.6 * var(--s)) 0 #000;
}
input:checked {
  box-shadow: 
    0 calc(6 * var(--s)) 0 #0000, 
    0 calc(-6 * var(--s)) 0 #0000;
}
input:checked::before,
input:checked::after {
  transform: rotate(45deg);
  transition: 0.6s 0.1s;
}
input:checked::after {
  transform: rotate(-45deg);
}

body {
  text-align: center;
  padding: 70px 0 0;
}