Меню со смещением тени - пример html js css

• HTML код


• CSS код
• Результат кода

<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>

.shadow-button-set {

  margin: 0;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 2.5vmin;

}

  

  .shadow-button-set > li {

    display: inline-flex;

    background: black;

  }

  

  .shadow-button-set > li:is(:hover, :focus-within) > button:not(:active) {

      --distance: -10px;

    }

  

  .shadow-button-set button {

    -webkit-appearance: none;

       -moz-appearance: none;

            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) {

  

  .shadow-button-set button {

      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;

}