HTML代码：

<a data-lity href="网址" button type="button" class="cool_btn btn btn-light">点击这里</a>

<style>
.cool_btn {
display: inline-block;
padding: 15px 45px;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
border: none;
border-radius: 60px;    /*--- 按钮圆角 --*/
background-color: #448AD2;   /*--- 按钮默认颜色 --*/
color: #FFFFFF;    /*--- 文字颜色 --*/
position: relative;
overflow: hidden;
transition: transform 0.3s ease-in-out;
cursor: pointer;
z-index: 1;
}
.cool_btn:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #79C8BA;    /*--- 鼠标悬停后按钮颜色 --*/
opacity: 0.5;
z-index: -1;
transition: width 0.3s ease-in-out;
}
.cool_btn:hover {
transform: scale(1.05);
}
.cool_btn:hover:before {
width: 100%;
}
</style>