![在这里插入图片描述](https://img-blog.csdnimg.cn/20210426095945366.gif#pic_center)
<div class="horizontalOverlay"><span>Hover me</span></div>
<style>
.horizontalOverlay {
overflow: hidden;
padding: 12px 30px;
border-radius: 6px;
background-color: #e5edff;
color: #5851ec;
position: relative;
display: inline-block;
cursor: pointer;
margin:100px;
}
.horizontalOverlay:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #5851ec;
opacity: .1;
transform: scaleX(0);
transform-origin: 100% 100%;
transition: transform .6s cubic-bezier(.53, .21, 0, 1);
will-change: transform;
}
.horizontalOverlay:hover:before {
transform-origin: 0 0;
transform: scaleX(1);
}
</style>