Efek snippet ini masih menganimasikan border
<button>button<span></span></button>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: sans-serif;
background-color: #272727;
}
button {
background-color: transparent;
border: none;
position: relative;
width: 400px;
height: 120px;
text-transform: uppercase;
line-height: 120px;
text-align: center;
color: white;
font-size: 45px;
letter-spacing: 15px;
overflow: hidden;
}
button:before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 4px;
background-color: white;
transition: all 0.5s;
}
button:hover:before {
left: 0;
}
button:after {
content: "";
position: absolute;
bottom: 0;
right: -100%;
width: 100%;
height: 4px;
background-color: white;
transition: all 0.5s;
}
button:hover:after {
right: 0;
}
span:before {
content: "";
position: absolute;
top: -100%;
right: 0;
width: 4px;
height: 100%;
background-color: white;
transition: all 0.5s;
}
button:hover span:before {
top: 0;
}
span:after {
content: "";
position: absolute;
bottom: -100%;
left: 0;
width: 4px;
height: 100%;
background-color: white;
transition: all 0.5s;
}
button:hover span:after {
bottom: 0;
}