默认效果,鼠标放上去后会从中间出现一条线,然后向上下两边拓展
变动过程
最终效果
代码:
HTML部分
<template>
<div class="test">
<button class="btn">HOVER</button>
</div>
</template>
CSS部分
<style lang="scss" scoped>
.test {
padding: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
.btn {
width: 120px;
height: 42px;
font-weight: 600;
font-size: 18px;
line-height: 1;
letter-spacing: 4px;
background: transparent;
border: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 0;
transition: color 0.3s linear;
cursor: pointer;
}
.btn:before {
content: "";
width: 0;
height: 2px;
background-color: #1630f1;
position: absolute;
left: 0;
z-index: -2;
transition: width 0.3s linear;
}
.btn:hover:before {
width: 100%;
}
.btn:after {
content: "";
width: 100%;
height: 0;
background-color: #1630f1;
position: absolute;
z-index: -1;
transition: height 0.3s linear;
}
.btn:hover:after {
transition-delay: 0.3s;
height: 100%;
}
.btn:hover {
color: #fff;
transition-delay: 0.3s;
}
}
</style>