0

Buenas hoy vengo porque necesito saber cual código que se utiliza para cambiar una imagen cuando se pone el mouse sobre ella y como le hago para aplicarlo al clásico botón de los formularios.

<input class="botons" type="submit" value="Login">
2
  • Trata de explicar mejor tu duda por favor, lee Cómo preguntar
    – user128299
    Commented el 7 sept. 2020 a las 18:16
  • Falta información detallada y mas clara a tu pregunta. Commented el 7 sept. 2020 a las 18:20

1 respuesta 1

-1

Si tu botón tiene 200px * 50px por ejemplo, y quieres que tenga una imagen que cambie al hacer hover... lo primero es hacer la imagen con ambos estados, un ejemplo...

  • Boton: 200px * 50px.
  • Alto de imagen para usar: 200px * 100px.
  • Debes poner la imagen del estado normal del boton en los primeros.
  • 50px del alto de la imagen. El estado hover en desde los 51px de la imagen hacia abajo. Ambas imágenes deben estar distribuidas para que encajen en los 200px * 50px.

luego:

.botons {
  width: 200px;
  height: 50px;
  background-image: url('ruta de tu imagen');
  background-position: top;
}
.botons:hover {
  background-position: bottom;
}

Lógicamente debes quitar el "Login" del value, y resetear los valores css por de fault que trae el input tipo submit, como el borde, background, etc. Puedes usar dos imágenes diferentes para el mismo efecto, pero esto haría un salto raro a la primera carga del hover.

1
  • Es mejor esperar a que el OP provea un mejor contexto pues a la pregunta le faltan muchos detalles
    – user128299
    Commented el 7 sept. 2020 a las 18:34

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.