按钮边框动画
在鼠标悬停时创建边框动画。
- 使用
::before
和::after
伪元素在框的上方和下方创建两个相对的宽度为24px
的方块。 - 使用
:hover
伪类在悬停时将这些元素的width
扩展到100%
,并使用transition
动画变化。
<button class="animated-border-button">提交</button>
.animated-border-button {
background-color: #263059;
border: none;
color: #ffffff;
outline: none;
padding: 12px 40px 10px;
position: relative;
}
.animated-border-button::before,
.animated-border-button::after {
border: 0 solid transparent;
transition: all 0.3s;
content: '';
height: 0;
position: absolute;
width: 24px;
}
.animated-border-button::before {
border-top: 2px solid #263059;
right: 0;
top: -4px;
}
.animated-border-button::after {
border-bottom: 2px solid #263059;
bottom: -4px;
left: 0;
}
.animated-border-button:hover::before,
.animated-border-button:hover::after {
width: 100%;
}