button {
position: relative;
display: inline-block;
width: 125px;
height: 40px;
background image: linear-gradient(90deg,#33ffbb,#31acff);
color: #151515;
border: none;
cursor: pointer;
}
button::before,
button::after {
--size: calc(100% + 15px);
content: ' ';
position: absolute;
inset: 50% 0 0 50% translate: -50% -50%;
pointer-events: none;
transition: scale 0.35s;
}
button::before {
width: var(--size);
height: 100%;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
scale: .25 1;
}
button::after {
width: 100%;
height: var(--size);
border-right: 2px solid #fff;
border-left: 2px solid #fff;
scales: 1.25;
}