Cacher is the code snippet organizer for pro developers

html, body, ul, li { margin: 0; padding: 0; }

ul li { list-style: none; }

.menu-container { width: 100%; height: 100vh; font-size: 0; }
.menu-container:before{ display: inline-block; width: 0; height: 100%; vertical-align: middle; content: ''; }
.menu-container div { display: inline-block; vertical-align: middle; width: 100%; font-size: 20px; text-align: center; }
.menu-container ul { margin: 50px 0; }
.menu-container ul li { position: relative; display: inline-block; padding: 10px 20px; margin: 0 2px; margin-bottom: 10px; border-radius: 2px; cursor: pointer; font-size: 14px; font-weight: 500; letter-spacing: 0.64px; text-transform: uppercase; }

.menu1 li:before { position: absolute; width: 0; height: 0; top: 0; left: 0; border: solid 2px transparent; transition: border-color 0s ease-in 0.4s, width 0.1s ease-in 0.3s, height 0.1s ease-in 0.2s; content: ''; box-sizing: border-box; }

.menu1 li:after { position: absolute; width: 0; height: 0; bottom: 0; right: 0; border: solid 2px transparent; transition: border-color 0s ease-in 0.2s, width 0.1s ease-in 0.1s, height 0.1s ease-in 0s; content: ''; box-sizing: border-box; }

.menu1 li:hover:before { width: 100%; height: 100%; border-top-color: #00e3d2; border-right-color: #00e3d2; transition: border-color 0s ease-in 0s, width 0.1s ease-in 0s, height 0.1s ease-in 0.1s; }

.menu1 li:hover:after { width: 100%; height: 100%; border-left-color: #00e3d2; border-bottom-color: #00e3d2; transition: border-color 0s ease-in 0.2s, width 0.1s ease-in 0.2s, height 0.1s ease-in 0.3s; }

.menu2 li:before { position: absolute; width: 0; height: 0; top: 0; left: 0; border: solid 2px transparent; transition: border-color 0s ease-in 0.2s, width 0.1s ease-in 0.1s, height 0.1s ease-in 0s; content: ''; box-sizing: border-box; }

.menu2 li:after { position: absolute; width: 0; height: 0; bottom: 0; right: 0; border: solid 2px transparent; transition: border-color 0s ease-in 0.2s, width 0.1s ease-in 0.1s, height 0.1s ease-in 0s; content: ''; box-sizing: border-box; }

.menu2 li:hover:before { width: 100%; height: 100%; border-top-color: #00e3d2; border-right-color: #00e3d2; transition: border-color 0s ease-in 0s, width 0.1s ease-in 0s, height 0.1s ease-in 0.1s; }

.menu2 li:hover:after { width: 100%; height: 100%; border-left-color: #00e3d2; border-bottom-color: #00e3d2; transition: border-color 0s ease-in 0s, width 0.1s ease-in 0s, height 0.1s ease-in 0.1s; }

.menu3 li:before { position: absolute; width: 0; height: 0; top: 0; left: 0; border: solid 2px transparent; transition: border-color 0s ease-in 0.2s, width 0.1s ease-in 0s, height 0.1s ease-in 0.1s; content: ''; box-sizing: border-box; }

.menu3 li:after { position: absolute; width: 0; height: 0; bottom: 0; right: 0; border: solid 2px transparent; transition: border-color 0s ease-in 0.2s, width 0.1s ease-in 0s, height 0.1s ease-in 0.1s; content: ''; box-sizing: border-box; }

.menu3 li:hover:before { width: 100%; height: 100%; border-top-color: #00e3d2; border-left-color: #00e3d2; transition: border-color 0s ease-in 0s, width 0.1s ease-in 0.1s, height 0.1s ease-in 0s; }

.menu3 li:hover:after { width: 100%; height: 100%; border-right-color: #00e3d2; border-bottom-color: #00e3d2; transition: border-color 0s ease-in 0s, width 0.1s ease-in 0.1s, height 0.1s ease-in 0s; }

.menu4 li { background-color: #00e3d2; color: #fff; border-radius: 0; transition: border-radius 0.3s; }

.menu4 li:hover { border-radius: 20px; }

.menu5 li { background-color: transparent; color: ; border: solid 2px #00e3d2; transition: border-radius 0.3s; box-sizing: border-box; }

.menu5 li:hover { border-radius: 20px; }

.menu6 li { position: relative; background-color: transparent; color: ; border: solid 2px #00e3d2; transition: background 0.3s; }

.menu6 li:before { position: absolute; width: 0; height: 100%; top: 0; left: 50%; content: ''; background-color: #00e3d2; z-index: -1; transition: width 0.3s; }

.menu6 li:after { position: absolute; width: 0; height: 100%; top: 0; right: 50%; content: ''; background-color: #00e3d2; z-index: -1; transition: width 0.3s; }

.menu6 li:hover:before { width: 50%; }
.menu6 li:hover:after { width: 50%; }

.menu7 li { position: relative; background-color: transparent; color: ; border: solid 2px #00e3d2; transition: background 0.3s; }

.menu7 li:before { position: absolute; width: 0; height: 100%; top: 0; left: 0; content: ''; background-color: #00e3d2; z-index: -1; transition: width 0.3s; }

.menu7 li:after { position: absolute; width: 0; height: 100%; top: 0; right: 0; content: ''; background-color: #00e3d2; z-index: -1; transition: width 0.3s; }

.menu7 li:hover:before { width: 50%; }
.menu7 li:hover:after { width: 50%; }

<div class="menu-container">
  <div>
    <ul class="menu1">
      <li>Show All</li>
      <li>Category A</li>
      <li>Category B</li>
      <li>Category C</li>
      <li>Category D</li>
    </ul>
    <ul class="menu2">
      <li>Show All</li>
      <li>Category A</li>
      <li>Category B</li>
      <li>Category C</li>
      <li>Category D</li>
    </ul>
    <ul class="menu3">
      <li>Show All</li>
      <li>Category A</li>
      <li>Category B</li>
      <li>Category C</li>
      <li>Category D</li>
    </ul>
    <ul class="menu4">
      <li>Show All</li>
      <li>Category A</li>
      <li>Category B</li>
      <li>Category C</li>
      <li>Category D</li>
    </ul>
    <ul class="menu5">
      <li>Show All</li>
      <li>Category A</li>
      <li>Category B</li>
      <li>Category C</li>
      <li>Category D</li>
    </ul>
    <ul class="menu6">
      <li>Show All</li>
      <li>Category A</li>
      <li>Category B</li>
      <li>Category C</li>
      <li>Category D</li>
    </ul>
    <ul class="menu7">
      <li>Show All</li>
      <li>Category A</li>
      <li>Category B</li>
      <li>Category C</li>
      <li>Category D</li>
    </ul>
  </div>
</div>