<nav>

<div class="multiCercle"><a href="#">Accueil</a><span></span><span></span><span></span></div>
  
<!-- <div class="multiCercle"><a href="#">Equipe</a><span></span><span></span><span></span></div> -->

<div class="multiCercle"><a href="#">Portefolio</a><span></span><span></span><span></span></div>

<div class="multiCercle"><a href="#">Gallerie</a><span></span><span></span><span></span></div>

<div class="multiCercle"><a href="#">Contact</a><span></span><span></span><span></span></div>
  
</nav>
*{
  margin:0;
  padding:0;
}
nav{
  display:flex;
  justify-content:space-evenly;
  background-color:#c8d6e5;
}

nav .multiCercle {
  position:relative;
  width: 170px;
  height: 125px;
}

nav .multiCercle span,
nav .multiCercle a{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  border-radius: 25px; 
  transition:1s;
}
nav .multiCercle span:before,
nav .multiCercle a:before {
    border-radius: 25px;
    position: absolute;
    content: ' ';
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    box-shadow: -5px -5px 15px rgba(255,255,255,0.6), 5px 5px 15px rgba(0,0,0,0.1);
    z-index: -1; 
  transition:1s;
  }
nav .multiCercle span:before{
  opacity:0; 
}
nav .multiCercle a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100px;
  height:50px;
  color:black;
  background: rgb(188,198,209);
background: linear-gradient(150deg, rgba(188,198,209,1) 0%, rgba(200,214,229,1) 48%, rgba(222,234,247,1) 98%);
  text-decoration:none;
  z-index:1;  
}
nav .multiCercle a:hover{
  color:white;
  letter-spacing:3px;
}
nav .multiCercle:hover>a:before{
  animation: onduleInv 2s ease-in;
}
nav .multiCercle:hover>span:before{
  animation:ondule 0.8s ease-in;
}
nav .multiCercle span:nth-child(2){
  width:120px;
  height:70px;
}
nav .multiCercle span:nth-child(2):before{
  animation-delay:0s;
}
.multiCercle span:nth-child(3){
  width:140px;
  height:90px;
}
nav .multiCercle span:nth-child(3):before{
  animation-delay:0.5s;
}
.multiCercle span:nth-child(4){
  width:160px;
  height:110px;
}
nav .multiCercle span:nth-child(4):before{
  animation-delay:1s;
}

@keyframes ondule{
  0%{
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
@keyframes onduleInv{
  0%{
    opacity:1;
  }
  50%{
    opacity:0;
  }
  100%{
    opacity:1;  
  }
}
// Fait par MatheoUrbano 11/11/22
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.