I have a problem with a button, the animation looks very good when :hover is given, however, since it is a button with rounded corners, when hovering, you see a small flash on hover and you see the straight corners.
when hovering those straight corners it is seen in a thousandth of a second, it is very fast but it is clearly a mistake. I tried to increase the speed but you don't see the effect of the white slash hovering over the button.
I did some tests and it seems to me that the error is in the :before pseudo-element, I just can't find what is wrong since I used the overflow:hidden and it doesn't seem to recognize it either.
Does anyone know what it is??
html{
background: black;
}
.btn-outline-blue:link, .btn-outline-blue:visited {
position: absolute;
text-transform: uppercase;
text-decoration: none;
border: 1.5px solid #fff;
background: transparent;
color: #fff;
padding: 1rem 5rem;
font-size: 1.5rem;
font-weight: 500;
border: 1.8px solid #fff;
border-radius: 2rem;
-webkit-transition: .2s;
-o-transition: .2s;
transition: .2s;
overflow: hidden !important;
-webkit-box-shadow: 0 20px 27px 3px rgba(0,0,0,.1);
box-shadow: 0 20px 27px 3px rgba(0,0,0,.1);
}
.btn-outline-blue:focus {
outline: none;
}
.btn-outline-blue:before {
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,.5);
width: 60px;
height: 100px;
left: 0;
top: 0;
opacity: .5s;
-webkit-filter: blur(30px);
filter: blur(30px);
-webkit-transform: translateX(-120px) skewX(-15deg);
-ms-transform: translateX(-120px) skewX(-15deg);
transform: translateX(-120px) skewX(-15deg);
}
.btn-outline-blue:after {
content: '';
display: block;
position: absolute;
background: rgba(255,255,255,.2);
width: 30px;
height: 100%;
left: 30px;
top: 0;
opacity: 0;
-webkit-filter: blur(30px);
filter: blur(30px);
-webkit-transform: translate(-100px) scaleX(-15deg);
-ms-transform: translate(-100px) scaleX(-15deg);
transform: translate(-100px) scaleX(-15deg);
}
.btn-outline-blue:hover {
background: #3881ff;
color: #fff;
cursor: pointer;
}
.btn-outline-blue:hover:before {
-webkit-transform: translateX(300px) skewX(-15deg);
-ms-transform: translateX(300px) skewX(-15deg);
transform: translateX(300px) skewX(-15deg);
opacity: .6;
-webkit-transition: .7s;
-o-transition: .7s;
transition: .7s;
}
.btn-outline-blue:hover:after {
-webkit-transform: translateX(300px) skewX(-15deg);
-ms-transform: translateX(300px) skewX(-15deg);
transform: translateX(300px) skewX(-15deg);
opacity: 1;
-webkit-transition: .7s;
-o-transition: .7s;
transition: .7s;
}
<!-- button buy now -->
<div class="header_btn_container">
<a href="#" class="btn-outline-blue">Buy now</a>
</div>
<!-- /button buy now -->
In the class .btn-outline-blue:hover:before set the property
border-radius: 2rem;
and remove the transform. You are seeing an edge precisely for this reason, you are changing the edge through an animation, so no matter how quickly the time elapses, the human eye gets to see that white flash. Better to change the border-radius directly.