Boton Con Imagen

gylle05 · #1 (**permalink**) 07/06/2012, 07:57

Buenas Amigos!!!! les keria preguntar si puedo colocar solomente una imagen en un boton sin necesidad que haya texto??? utilice el input y en type puse image pero no me sirve por que cuando doy un enter en mi pagina se recarga y no kiero ke pase eso....y tampoco kiero anular la tecla enter...se podra hacer algo???

_franb · #2 (**permalink**) 07/06/2012, 08:25

Buenas amigo, mi recomendación es que utilices la propiedad de CSS 'background-image' para lograr tu cometido.
[URL="http://www.w3schools.com/css/css_background.asp"]chequea esto[/URL]

Para generar el botón con HTML es correcto que utilices la etiqueta <input> pero el valor 'type' debería ser 'button', o en caso de que quieras enviar un formulario deberías utilizar el valor 'submit'.
También podrías utilizar la etiqueta <button>, indicando los valores 'button' o 'submit' para 'type'. (ej. <button type="button"></button>).
La etiqueta button es muy piola para utilizarla con javascript.

Para dar estilo a las etiquetas input y/o button tendrás que tener en cuenta que ambas tienen estilos por defecto, por lo que deberás resetearlas.

Ahora bien, si lo que deseas es generar un botón que sólo posee un link, te recomiendo que utilices la etiqueta <a>, que es el elemento HTML indicado para esto.
También a esta etiqueta podrás darle estilo con CSS a tu gusto.

Si no estás familiarizado con las etiquetas HTML te recomiendo que revises algún manualcito, son sencillos y rápidamente le agarrás la mano.

suerte amigo! cuéntame cómo te fue

gylle05 · #3 (**permalink**) 07/06/2012, 09:04

Sos un genio je nunca habia utilizado esa etiqueta....dentro del <button></button>
coloque una <img src="......"> luego lo hice transparente y sin bordes y solo kedo la imagen como yo keria...muchas gracias muchisisissimas gracias!!!!

_franb · #4 (**permalink**) 07/06/2012, 09:46

qué groso! una alegría enorme que le hayas encontrado la vuelta. ABRAZO!

Bokoa · #5 (**permalink**) 08/06/2012, 05:17

Tambien podrías haber utilizado etiquetas a:

Código:

<a href=""><img src="" /></a>

No es exactamente un boton, sino un hipervinculo pero quiza te hubiese valido tambien

rodeirojg · #6 (**permalink**) 08/06/2012, 12:51

Hace poco alguien preguntó algo similar, y una de las soluciones sería esta:

Diseñá una imagen de cómo se vería el botón (llamemosle: fondo_boton.jpg), y otra imagen cuando el mouse se posaría encima (fondo_boton_2.jpg). Entonces hacés lo siguiente:

<html>
<head>
<title>Creando un boton</title>

<style type=text/css>

#miboton a {
background-image: url(fondo_boton.jpg);
}

#miboton a:hover {
background-image: url(fondo_boton_2.jpg);
}

</style>
</head>
<body>

<div>
<a class=miboton href="#"> </a>
</div>

</body>
</html>

Si querés que el fondo no se repita, en el Style usá la propiedad :
background-repeat:no-repeat;