Overflow: hidden not being filled 100% by psuedo element? - html

Question

It's hard to explain this. I'm trying to do something like this:
https://codepen.io/pen/yLBaJOq
.button {
position: relative;
display: inline-block;
padding: 20px;
line-height: 10px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 9px solid black;
border-radius: 55px;
transition: all 0.35s ease-in-out;
color: black;
cursor: pointer;
overflow: hidden;
z-index: 1;
background-color: transparent;
}
.button:before {
content: '';
display: block;
position: absolute;
background-color: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
transform-origin: center;
width: calc(100% + 30px);
height: 0;
padding-top: 0%;
transition: all 0.35s ease-in-out;
z-index: -1;
}
.button:hover {
color: #fff;
border: 9px solid red;
}
.button:hover:before {
padding-top: 200%;
}
But there's a thin line between the border and the element. Like the pseudo-element :before is not filling out the parent 100%. Image of what I mean:
It's happening in all browsers I'm trying (Chrome, FF, Safari, all Mac).
So I'm wondering if I can prevent this from happening, while still keeping a similar hover effect.
I could of course just use the transition on the background color and scrap the idea with the pseudo-element as the background.

Answer 1

Add background color to the button hover.
Change:
.button:hover {
color: #fff;
border: 9px solid red;
}
to:
.button:hover {
color: #fff;
border: 9px solid red;
background-color: red;
}

Answer 2

.button {
position: relative;
display: inline-block;
padding: 20px;
line-height: 10px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 9px solid black;
border-radius: 55px;
transition: all 0.35s ease-in-out;
color: black;
cursor: pointer;
overflow: hidden;
z-index: 1;
background-color: transparent;
}
.button:before {
content: '';
display: block;
position: absolute;
background-color: red;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
transform-origin: center;
width: calc(100% + 30px);
height: 0;
padding-top: 0%;
transition: all 0.35s ease-in-out;
z-index: -1;
}
.button:hover {
color: #fff;
border: 9px solid red;
background: red;
}
.button:hover:before {
padding-top: 200%;
}
<div class="button">WOAH</div>