<!--HTML-->
<div class="exhibit-content">
<h1>Slide in animations</h1>
<button id="btn-left">LEFT</button>
<button id="btn-right">RIGHT</button>
<button id="btn-right">RIGHT</button>
<button id="btn-bottom">BOTTOM</button>
</div>
/* CSS */
button {
position: relative;
overflow: hidden;
z-index: 1;
}
button:hover {
color: white;
}
button::before {
z-index: -1;
position: absolute;
content: "";
height: 100%;
width: 100%;
background-color: black;
transition: all 0.4s ease-out;
}
#btn-left::before {
top: 0;
left: -100%;
}
#btn-left:hover::before {
left: 0;
}
#btn-top::before {
top: -100%;
left: 0;
}
#btn-top:hover::before {
top: 0;
}
#btn-right::before {
top: 0;
left: 100%;
}
#btn-right:hover::before {
left: 0;
}
#btn-bottom::before {
top: 100%;
left: 0;
}
#btn-bottom:hover::before {
top: 0;
}