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">
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">
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...
100px
.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.