console
<div>
<button>button</button>
</div>
div {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
button {
text-transform: uppercase;
background: none;
border: 2px solid rgb(32, 204, 84);
padding: 16px 26px;
position: relative;
cursor: pointer;
color: rgb(32, 204, 84);
}
button::before, button::after {
content: '';
position: absolute;
width: 12px;
height: 2px;
background-color: black;
transition: 0.3s linear;
}
button::before {
top: -2px;
left: 10px;
}
button::after {
bottom: -2px;
right: 10px;
}
button:hover::before {
left: 80px;
}
button:hover::after {
right: 80px;
}