<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;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.