radial menu in html

menu.html

<style>
  button {
    --size: 75px;
    width: var(--size);
    height: var(--size);
    border-radius: calc(var(--size) / 2);
    border: var(--color) 1px solid;
  }
  #main {
    position: absolute;
    left: 500px;
    top: 200px;
    display: grid;
    grid-template: auto / auto;
  }
  #main > button {
    background: silver;
    z-index: 10;
  }
  #main > button.revealed {
    border: none;
    background: radial-gradient(white 50%, var(--color) 30%, transparent);
  }
  #main > div {
    display: grid;
    grid-template: auto / auto;
  }
  #main * {
    grid-row: 1;
    grid-column: 1;
  }
  #main > div > button {
    transition: transform 2s ease-in-out;
    transform: none;
  }
  #main > div > button.revealed {
    transform: rotate(calc(var(--number) * 60deg)) translateY(calc(var(--size) * 1.5))
      rotate(calc(var(--number) * -60deg));
  }
  #main > div > button.revealed:hover {
    border: none;
    background: radial-gradient(var(--color) 25%, transparent 75%);
  }
</style>

<div id="main">
  <button onclick="reveal(event)" style="--color: black">press</button>
  <div>
    <button style="--color: green">send</button>
    <button style="--color: cyan">like</button>
    <button style="--color: yellow">save</button>
    <button style="--color: orange">warn</button>
    <button style="--color: purple">delete</button>
    <button style="--color: blue">email</button>
  </div>
</div>

<script defer>
  const container = document.querySelector("#main > div");
  function reveal(event) {
    event.stopPropagation();
    event.target.classList.toggle('revealed');
    let x = 0;
    for (const b of container.children) {
      console.log(b);
      b.style.setProperty("--number", x);
      setTimeout((el) => el.classList.toggle("revealed"), x * 500, b);
      x++;
    }
  }
</script>