2

tengo un problema con un botón, se ve muy bien la animación cuando se le da :hover sin embargo por ser un botón de esquinas redondeadas al dar hover se ve un pequeño destello en el hover y se ven las esquinas rectas.

al dar hover esas esquinas rectas se ve en una milésima de segundo, es muy rápido pero claramente es un error. Intenté aumentar la velocidad pero no se ve el efecto de la diagonal blanca pasando sobre el botón.

Hice unas pruebas y me parece que el error es en el pseudoelemento :before, sólo que no encuentro qué es lo que está mal ya que usé el overflow:hidden y parece que tampoco lo reconoce.

Alguien sabe a qué se deba??

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 -->  

1
  • 1
    El problema lo provoca la directiva filter, si las sacas el problema se soluciona. No agrego una respuesta, porque no tengo tiempo, me estoy yendo.
    – Marcos
    el 28 oct. 2019 a las 21:37

1 respuesta 1

1

En la clase .btn-outline-blue:hover:before ponele la propiedad border-radius: 2rem; y eliminale la transformacion. Estas viendo un borde justamente por eso, estas cambiando el borde a traves de una animacion, entonces por mas rapido que sea el tiempo que transcurra, el ojo humano llega a ver ese destello blanco. Mejor cambiarle la el border-radius directamente.

Por otro lado, fijate en .btn-outline-blue:link, .btn-outline-blue:visited que tenes dos veces definida la propiedad border (no afecta en nada pero por las dudas te aviso)

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: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;
}



 .btn-outline-blue:hover:before {
     border-radius: 2rem;
     opacity: .6;
     -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 -->  

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.