::after pseudo element overflowing element, using overflow:hidden; has extra space - html

Question

I am trying to make a button with a hover effect and ::after pseudo class is involved.
The ::after pseudo-class covers 100% of the button's height and width, even more just to be sure; then when :hover, the ::after element's width will shrink to 0.
My problem is that I can't precisely size the ::after element, so I simply added overflow: hidden; to the button so that it will cut out the overflowing parts of the ::after pseudo-element. But it cropped a little too much, leaving one pixel between the border and the ::after pseudo-element covering the button.
.btn {
font-family: inherit;
background-color: transparent;
text-decoration: none;
padding: 1rem 1.5rem;
font-size: 2.3rem;
color: #fff;
border: solid 3px #EF9C43;
width: 50%;
border-radius: 100rem;
text-transform: uppercase;
font-weight: 400;
transition: color 0.3s, transform 0.3s, box-shadow 0.3s;
position: relative;
box-shadow: 1rem 1rem 4rem rgba(31, 31, 31, 0.5);
z-index: 5;
backface-visibility: hidden;
overflow: hidden;
}
.btn::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
background-color: #EF9C43;
width: 110%;
height: 110%;
z-index: -1;
transition: width 0.3s;
}
.btn:hover {
font-weight: 600;
color: #1f1f1f;
transform: translateY(-0.3rem);
box-shadow: 1rem 1.5rem 2rem rgba(31, 31, 31, 0.6);
}
.btn:active {
transform: translateY(-0.1rem);
box-shadow: 1rem 1.25rem 2.5rem rgba(31, 31, 31, 0.5);
}
.btn:hover::after {
width: 0;
}
<button class="btn btn--orange">Hire our services</button>
Here is the codepen of my case: https://codepen.io/CoolBoiDave/pen/bGLdwxE
Any help would be appreciated! (PS: sorry for bad english)

Answer 1

I don't know why would you use an ::after pseudo element when all you need is to
transition a background-image.
Also, you could use an inset box-shadow instead of border.
.btn {
background-color: transparent;
padding: 1rem 1.5rem;
font: 400 2.3rem sans-serif;
text-transform: uppercase;
color: #fff;
border: 0;
border-radius: 4rem;
font-weight: 400;
transition: color .3s, background-position .3s, box-shadow .3s;
box-shadow: 0 1rem 4rem rgba(0,0,0,0.3), inset 0 0 0 3px #EF9C43;
background-image: linear-gradient(90deg, rgba(255,145,0,1) 50%, rgba(0,0,0,0) 50%);
background-size: 200%;
}
.btn:hover,
.btn:active {
background-position: 100%;
color: #1f1f1f;
box-shadow: 0 1.5rem 2rem rgba(0,0,0,0.3), inset 0 0 0 3px #EF9C43;
}
<button class="btn btn--orange">Hire our services</button>