Button rounded border on hover not working - html

Question

I have a button and I used animation to show borders when hovering over that button. But borders work perfectly on top and bottom but on left and right there are not showing properly.
I want borders to be rounded as here:
My Outcome:
button {
position: relative;
border-radius: 100px;
overflow: hidden;
}
button::before,
button::after {
content: "";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
span::before,
span::after {
content: "";
width: 2px;
height: 0;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
button:hover::before,
button:hover::after {
width: 100%;
}
button:hover span::before,
button:hover span::after {
height: 100%;
}
.btn-3::after {
left: 0;
bottom: 0;
transition-delay: 0.6s;
}
.btn-3 span::after {
transition-delay: 0.4s;
right: 0;
bottom: 0;
}
.btn-3::before {
right: 0;
top: 0;
transition-delay: 0.2s;
}
.btn-3 span::before {
transition-delay: 0s;
left: 0;
top: 0;
}
.btn-3:hover::after {
transition-delay: 0s;
}
.btn-3:hover span::after {
transition-delay: 0.2s;
}
.btn-3:hover::before {
transition-delay: 0.4s;
}
.btn-3:hover span::before {
transition-delay: 0.6s;
}
<button (click)="openDialog()"
class="extended-fab-button btn-3"
mat-fab color="primary">
<span class="extended-fab-button__text">Test File</span>
</button>

Answer 1

If you remove your border-radius: 100px; rule, then your button will have the shape you described as desirable in your question.
button {
position: relative;
overflow: hidden;
}
button::before,
button::after {
content: "";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
span::before,
span::after {
content: "";
width: 2px;
height: 0;
position: absolute;
transition: all 0.2s linear;
background: #fff;
}
button:hover::before,
button:hover::after {
width: 100%;
}
button:hover span::before,
button:hover span::after {
height: 100%;
}
.btn-3::after {
left: 0;
bottom: 0;
transition-delay: 0.6s;
}
.btn-3 span::after {
transition-delay: 0.4s;
right: 0;
bottom: 0;
}
.btn-3::before {
right: 0;
top: 0;
transition-delay: 0.2s;
}
.btn-3 span::before {
transition-delay: 0s;
left: 0;
top: 0;
}
.btn-3:hover::after {
transition-delay: 0s;
}
.btn-3:hover span::after {
transition-delay: 0.2s;
}
.btn-3:hover::before {
transition-delay: 0.4s;
}
.btn-3:hover span::before {
transition-delay: 0.6s;
}
<button (click)="openDialog()"
class="extended-fab-button btn-3"
mat-fab color="primary">
<span class="extended-fab-button__text">Test File</span>
</button>