Avisos
Vaciar todo

Rollover boton breezing forms imagen  

 
Javier
 Javier
Honorable Member

Hola!

Me gustaria poner un rollover a la imagen (boton enviar del formulario breezing), adjunto imagen para que lo veais...

Me gustaria al menos poner un efecto para que cuando se realice el rollover, destaque mas!

GRACIAS

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 14/09/2015 7:02 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Te refieres a que cuando pase el mouse tenga algún efecto?

Si es una imagen fija esto podría complicarse, lo mejor sería por CSS

Si quieres conservar la imagen lo que te recomiendo es darle una forma de botón a tu imagen esto hará mas intuitivo el hecho de que sea un botón
http://es.123rf.com/imagenes-de-archivo/botones.html

Saludos.

ResponderCitar
Respondido : 14/09/2015 10:13 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Javier
 Javier
Honorable Member

Hola!

Si es una imagen fija, lo voy a hacer mas intuitivo, pero quiero que me digas como ponerle el codigo css para que tenga algun efecto al realizar el rollover.

GRACIAS

ResponderCitar
Respondido : 15/09/2015 12:36 pm
Pablo Velasco
 Pablo Velasco
Illustrious Member

Hola,

Una cosa que puedes hacer es cargar una imagen alternativa, con el mismo tamaño que la original, cuando se coloca el puntero del ratón sobre la imagen. En el siguiente enlace se explica cómo hacerlo:

http://stackoverflow.com/questions/10792216/input-button-single-image-rollover-using-css

En tu caso, en lugar de poner #login_submit en el CSS tendrás que poner #ff_elem41

ResponderCitar
Respondido : 15/09/2015 4:52 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Javier
 Javier
Honorable Member

a mi no me sale,

he probado un poco de todo y nada.

Te dejo el codigo que he puesto:

#ff_elem41 {
outline: none;
display:block;
margin-left: auto;
margin-right: auto;
background: url("http://avvocatocivilistaiodice.it/images/formularios/submit2.png") 0 0 no-repeat;
}
#ff_elem41:hover {
background-position: -141px 0;
}
#ff_elem41:focus {
background-position: -282px 0;
}

ResponderCitar
Respondido : 15/09/2015 7:15 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

HOla

El código que estas usando no es compatible con la imagen que has puesto

El código asume que tienes en una sola imagen los dos estados del botón, el normal y le hover, es por eso que cuando por CSS detecta hover el background se desplaza

El código que forma tu boton según veo es un input, no podrás usar el código anterior, te sugiero revises

http://stackoverflow.com/questions/10331615/changing-image-for-button-on-hover

Puedes probar con el código de Chief17 que parece la forma más simple

Saludos.

Saludos.

ResponderCitar
Respondido : 15/09/2015 7:41 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Javier
 Javier
Honorable Member

ah vale!

Gracias pero no tengo ni idea que hacer con ese codigo... Me lo podrias explicar paso a paso?

Yo estoy usando Breezing Forms para el formulario

GRACIAS

ResponderCitar
Respondido : 15/09/2015 8:06 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Lo que te aconsejaría es que no hagas esto, te estas complicando por un efecto que desde mi punto de vista no merece la pena.

Lo normal es usar CSS para dar efecto de hover a los botones, no imagenes

Por ejemplo
http://css3buttongenerator.com/

Te sugiero quitar la imagen y dejar el input , luego con el input libre se podrían aplicar estilos CSS que estilicen un poco al botón.

Saludos.

ResponderCitar
Respondido : 15/09/2015 8:23 pm