Find the code used in this tutorial in below

Color Code Used:

Button and Hover:#f66060

Main Section:#cdcdcd

Inner Section:#e0e0e0

CSS code used:

nav ul li {
    --c: #f66060;
    color: var(--c);
    border: 0.3em solid var(--c);
    border-radius: 0.5em;
	  letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
}
nav ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--c);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
}
nav ul li:hover span {
    transform: translateY(0) scale(2);
}
nav ul li span:nth-child(1) {
    --n: 1;
}
nav ul li span:nth-child(2) {
    --n: 2;
}
nav ul li span:nth-child(3) {
    --n: 3;
}
nav ul li span:nth-child(4) {
    --n: 4;
}

Js Code used:

<script>
window.onload = function () {
	var menuItems = document.querySelectorAll('#menu-1-b9ca184 > li > a');

	var menuItemsLength = menuItems.length;

for(var j=0; j<menuItemsLength;j++){
  for(var i=0;i<4;i++){
  	menuItems[j].appendChild(document.createElement('span'));

  }
  }
};
</script>