Botón reset con imagen

[djmashe]

Buenas a todos los foreros, mi consulta es la siguiente:

1. ¿como puedo hacer un <input type="RESET" name="Borrar"> pero con una imagen, para limpiar los campos de un formulario?
2. ¿se puede implementar esto con CSS, para que todos los botones tengan un estilo grafico predeterminado (siempre una imagen)?

Desde ya gracias, y a la espera de una solución.

[Kailu]

1- Puedes hacer un botón a partir de una imagen y lo programas con JS.

2- Sí, utilizando estilos puedes asignar una imagen a un botón, por ejemplo:

Código HTML:

<style>
      .boton {background-image:url(tu_imagen.gif); }
</style>

<input type="reset" value="&nbsp;&nbsp;&nbsp;&nbsp;" class="boton" />
<br />
<input type="button" value="OTRO BOTÓN" class="boton" /> 

Con eso tu botón tendría una imagen de fondo y a todos los que les asignes la clase la adoptarían, aunque este ejemplo es muy sencillo pero se puede.

Por cierto los &nbsp; son espacios en blanco, si tu imagen para el botón incluye la descripción de este te recomiendo los uses, si no puedes escribir algo ahí como "Borrar datos".

[Kailu]

Por otro lado esto funciona bien con Firefox pero no con IE así es que no te lo recomiendo mucho, aquí te dejo un vínculo tal vez te ayude.

Botones con estilo

[caricatos]

Hola:

Dentro de un tag button puedes poner una imagen sin problemas (tag img)... y uno de los posibles tipos es justamente reset:
<button type="reset" name="borrar" ><img src="borrar.gif" alt="borrar" /></button>

No entiendo porqué no se usan los botones "como botones" y los inputs se reservan pare entradas...

Saludos

[PSL FoX]

Hi, una sola pregunta sobre el tema, cuando hago eso aparece un margen fuera o alarrededor de la imagen, como hago para desaparecer esos margenes, prove con la propiedad BORDER de "img" pero no resulto, podrias ayudarme en ello grcias.

[buzu]

Puedes usar CSS

buttton{
border: 0px;
}


Aclaro que cuando usas 0 a diferencia de otros numeros, no es necesario especificar un sistema de medida como px o em, pero siempre es bueno hacerlo.

[caricatos]

Hola:

Y si no quieres un fondo puedes usar background-color: transparent...

Saludos

[AlZuwaga]

Hola a todos
Disculpas que me meta en este tema, pero me causó al menos curiosidad la frase de caricatos

No entiendo porqué no se usan los botones "como botones" y los inputs se reservan pare entradas...

O es que estoy muy tonto hoy, o hay un juego de palabras detrás de esta, o es simplemente no estoy al nivel necesario como para comprenderlo!

Saludos

[caricatos]

Iniciado por Al Zuwaga

Hola a todos
Disculpas que me meta en este tema, pero me causó al menos curiosidad la frase de caricatos



O es que estoy muy tonto hoy, o hay un juego de palabras detrás de esta, o es simplemente no estoy al nivel necesario como para comprenderlo!

Saludos

Hola:

Había contestado el tema y se fué todo, así que trataré de hecerlo otra vez...

Como botón me refiero al tag button, que significa eso (la taducción literal), y las entradas reservarlas al tag input... la idea es no usar como botones el tag input (aunque sea correcto, no creo que esté semánticamente bien), aunque hay ocasiones especiales que según el botón que pulsemos esperamos distintos comportamientos... en donde se justificaría su uso.

Saludos

[AlZuwaga]

Ya entiendo! Y resultó que estaba muy tonto ayer ñ_ñ
No me había dado cuenta de esto en tu respuesta:

Código:

<button type="reset" name="borrar" ><img src="borrar.gif" alt="borrar" /></button>

Saludos