<div class="overlayLeftBtn"><span>Hover me</span></div>
<style>
.overlayLeftBtn {
display: inline-block;
position: relative;
padding: 12px 24px;
background: pink;
text-align: center;
border-radius: 6px;
color: #fff;
overflow: hidden;
cursor: pointer;
margin:100px;
}
.overlayLeftBtn::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 50%;
background: rgb(245, 117, 139);
transform: translate(-101%, -50%);
width: 100%;
height: 100%;
transition: all .3s;
}
span {
position: relative;
z-index: 1;
}
.overlayLeftBtn:hover::after {
transform: translateY(-50%);
}
</style>