<div class="btn-container">
<div class="button">
<div class="button__content">hover me to change</div>
</div>
</div>
.btn-container {
padding: 10px;
.button {
width: 200px;
height: 60px;
position: relative;
background: #fff;
margin: 30px auto;
box-sizing: border-box;
cursor: pointer;
text-align: center;
line-height: 60px;
&::before {
content: "";
width: 0;
height: 0;
background: #00adb5;
position: absolute;
top: -1px;
right: -1px;
z-index: 0;
transition: width 0.5s, height 0.5s;
}
&::after {
content: "";
width: 0;
height: 0;
background: #00adb5;
position: absolute;
bottom: -1px;
left: -1px;
z-index: 0;
transition: width 0.5s, height 0.5s;
}
&:hover::before {
width: calc(100% + 2px);
height: calc(100% + 2px);
}
&:hover::after {
width: calc(100% + 2px);
height: calc(100% + 2px);
}
.button__content {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background: #fff;
}
}
}
css实现hover边框动画
猜你喜欢
转载自blog.csdn.net/weixin_53334387/article/details/126835043
今日推荐
周排行