gistfile1.txt

html {
  background: radial-gradient(#e66465, #9198e5);
}

button {
  font-family: "SF Pro";
}

.ActionMenu {
  /* resets */
  margin: 0;
  padding: 0;
  list-style: none;
  
  /* positioning / sizing */
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  
  /* styles */
  display: grid;
  gap: 1em;
  padding: 1em 1em calc(1em + env(safe-area-inset-bottom));
}

.ActionMenu {
  background-color: rgb(255 255 255 / 0.55);
  backdrop-filter: contrast(0.5) blur(20px) brightness(50%) saturate(6);
}

.ActionMenu button {
  appearance: none;
  border: none;
  
  width: 100%;
  height: 58px;
  
  cursor: pointer;
  
  /* for now */
  background-color: #f0f0f0cf;
}

.ActionMenu .cancel {
  background-color: #f0f0f0ef;
  font-weight: bold;
  border-radius: 8px;
}

.ActionMenu button:focus-visible {
  border: 1px solid rgba(0, 125, 250, 0.6);
  outline: none;
  box-shadow: inset 0 0 0 4px rgb(0 125 250 / 60%);
}

.ActionMenu button:is(:hover,:active,:focus-visible) {
  background: #f0f0f0ef;
}

.ActionMenu .cancel:is(:hover,:active,:focus-visible) {
  background: #f0f0f0ff;
}

.ActionMenu .actions {
  display: grid;
  gap: 2px;
  border-radius: 8px;
}

.ActionMenu .actions button {
}

.ActionMenu .actions > :first-child button {
  border-radius: 8px 8px 0 0;
}

.ActionMenu .actions > :last-child button {
  border-radius: 0 0 8px 8px;  
}

@media (prefers-color-scheme: light) {
  .ActionMenu {
    background-color: rgb(0 0 0 / 0.55)
  }
  
  .ActionMenu button {
    color: #f0f0f0;
    background-color: #1f1f1faf;
  }
  
  .ActionMenu .cancel {
    background-color: #1f1f1fcf;
  }
}

gistfile2.txt

<menu class="ActionMenu">
  <div class="actions">
    <li><button>Action 1</button></li>
    <li><button>Action 2</button></li>
    <li><button>Action 3</button></li>
  </div>
  <li><button class="cancel">Cancel</button></li>
</menu>