<ul class="shadow-button-set">
  <li><button>New Game</button></li>
  <li><button>Continue</button></li>
  <li><button>Online</button></li>
  <li><button>Settings</button></li>
  <li><button>Quit</button></li>
</ul>

@use postcss-nested;

.shadow-button-set {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5vmin;
  
  & > li {
    display: inline-flex;
    background: black;
    
    &:is(:hover, :focus-within) > button:not(:active) {
      --distance: -10px;
    }
  }
  
  & button {
    appearance: none;
    outline: none;
    font-size: 5vmin;
    border: 3px solid black;
    background: white;
    
    --distance: 0;
    transform: translateX(var(--distance)) translateY(var(--distance));
    
    @media (prefers-reduced-motion: no-preference) {
      will-change: transform;
      transition: transform .2s ease ;
    }
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  
  display: grid;
  place-content: center;
}