0

mi problema es el siguiente estoy tratando de lograr una especie de efecto destello como el que aparece en los botones de la siguiente web

el problema que no me funciona el :hover

mi estructura es la siguiente

.grad-blue {
	background-image: linear-gradient(to right bottom, #00c6ff 0%, #0072ff 51%, #00c6ff 100%);
	border: none;
    border-radius: 72px;
    height: 72px;
    width: 72px;
    margin: auto 13px;
}

.grad-blue:hover { 
	background-position: right center; 
}
<div class="btn btn-opt" style=" position: absolute; bottom: 30px; color: #fff; margin: 0 auto; width: 100%;">
  <button type="button" class="grad-blue">OPCION</button>
  <button type="button" class="grad-blue">OPCION</button>
  <button type="button" class="grad-blue">OPCION</button>
</div>

Como ven al pasar el mouse por encima no ejecuta el css...

DATOS ADICIONALES: Mi navegador es la última versión de chrome y mi so es win 10 x64 y probe cambiar las etiquetas por y tampoco tuve suerte

desde ya gracias

1 respuesta 1

1

Hola @Macali lo que te falto poner en el CSS fue solo un poco de transicion y claro el hover no se movera solo, debes ponerle el numero de px que se movera en este caso del mismo width del boton

.grad-blue {
background: linear-gradient(to right bottom, #00c6ff 0%, #0072ff 51%, #00c6ff 100%);
border: none;
border-radius: 72px;
height: 72px;
width: 72px;
margin: auto 13px;
}

.grad-blue:hover { 
 transition: 0.2s linear;
 background-position: left 72px center; 
}
1
  • excelente amigo! funcionó muchas gracias
    – Macali
    Commented el 14 jul. 2019 a las 14:52

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.