<div class="flex-split">
  <div class="sinistra">
    <h1>Da sinistra</h1>
    <a href="#" class="btn">Bottone</a>
  </div>
  <div class="destra">
    <h1>Da destra</h1>
    <a href="#" class="btn">Bottone</a>
  </div>
  <div class="alto">
    <h1>Dall'alto</h1>
    <a href="#" class="btn">Bottone</a>
  </div>
  <div class="basso">
    <h1>Dal basso</h1>
    <a href="#" class="btn">Bottone</a>
  </div>
  <div class="esterno">
    <h1>Dall'esterno</h1>
    <a href="#" class="btn">Bottone</a>
  </div>
  <div class="basso-sinistra">
    <h1>Dal basso a sinistra</h1>
    <a href="#" class="btn">Bottone</a>
  </div>
</div>

.flex-split {
	display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  height: 100vh;

  div{
    flex: 1 0 40vw;
    text-align: center;
  }
}

.btn{
  border: 1px solid #333;
  border-radius: 6px;
  color: #333;
  display: block;
  font-family: sans-serif;
  margin: 10px auto;
  max-width: 100px;
  padding: 10px;
  text-decoration: none;
  
  transition: all .6s ease;
}

.btn:hover{
  color: #fff;
}

.sinistra .btn:hover{
  box-shadow: 20vw 0 0 #333 inset;
}

.destra .btn:hover{
  box-shadow: -20vw 0 0 #333 inset;
}

.alto .btn:hover{
  box-shadow: 0 10vw 0 #333 inset;
}

.basso .btn:hover{
  box-shadow: 0 -10vw 0 #333 inset;
}

.esterno .btn:hover{
  box-shadow: 0 0 0 5vw #333 inset;
}

.basso-sinistra .btn:hover{
  box-shadow: 20vw -20vw 0 #333 inset;
}