Creates a border animation on hover.
- Use the
:before
and:after
pseudo-elements as borders that animate on hover.
预览
HTML
<button class="animated-border-button">Submit</button>
CSS
.animated-border-button {
background-color: #141414;
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 #141414;
right: 0;
top: -4px;
}
.animated-border-button:after {
border-bottom: 2px solid #141414;
bottom: -4px;
left: 0;
}
.animated-border-button:hover:before,
.animated-border-button:hover:after {
width: 100%;
}
翻译自:https://www.30secondsofcode.org/css/s/button-border-animation