Imagen de fondo de un boton elastica

[jaspher]

Hola amigos de Foros del Web, se que ustedes me pueden ayudar en esto que no se como hacerlo .
Miren, quisiera saber como hacer que la imagen de fondo de un Boton. cambie su ancho y altura para que este totalmente inmersa en el boton, osea que la imagen se vea completa como fondo de un boton.
No se si esto se pueda hacer, pero tengo esperanzas, y gracias por su tiempo y ayuda.

[carlospc]

En realidad no se como hacerlo, jeje... pero te puedo sugerir que a tu boton les asignes un ancho y alto determinado y pones la imagen que deseas...

Otra alternativa es que le asignes un alto determinado y utilices como imagen de fondo... una imagen de 1px de ancho y del alto que le asignaste...

Saludos, nos informas como te fue...

[Ventru3]

Cuando dices como fondo de un botón, entiendo que es un botón de un formulario en el que la imagen esta dentro, no? En este caso seria así:

Código HTML:

<button name="boton_1" type="button">
<img src="ruta de la imagen" width="ancho de la imagen" height="alto de la imagen" border="0" alt="enviar">
</button> 

O si es una imagen botón así:

Código HTML:

<input type="image" name="boton" src="ruta de la imagen" width="ancho de la imagen" height="alto de la imagen"> 

[carlospc]

Para tu boton usa el boton normal pero con clase:

<input type="button" class="claseboton" value="Texto del boton"/>

y en tu css:

.claseboton{
background-image:url(imagen.jpg);
}

Listo... saludos... dame Karma... jeje

[jaspher]

Iniciado por Ventru3

Cuando dices como fondo de un botón, entiendo que es un botón de un formulario en el que la imagen esta dentro, no? En este caso seria así:

Código HTML:

<button name="boton_1" type="button">
<img src="ruta de la imagen" width="ancho de la imagen" height="alto de la imagen" border="0" alt="enviar">
</button> 

O si es una imagen botón así:

Código HTML:

<input type="image" name="boton" src="ruta de la imagen" width="ancho de la imagen" height="alto de la imagen"> 

Hola amigo y gracias por tu respuesta, tu idea se acerca a lo que yo quiero pero lo que sucede es que no puedo escribir sobre la imagen,
Mi idea era tener una imagen de fondo para varios botones de from, los tamaños de los botones varia es por eso que la imagen se autoregule segun el tamño del boton, porfavor si fueras tan amable de ayudarme, si es posibles con java script o algo porque realmente no se como hacerlo

[jaspher]

Iniciado por carlospc

Para tu boton usa el boton normal pero con clase:

<input type="button" class="claseboton" value="Texto del boton"/>

y en tu css:

.claseboton{
background-image:url(imagen.jpg);
}

Listo... saludos... dame Karma... jeje

gracias por la ayuda pero
la imagen no se autoregula, estoy usando ese metodo pero no va

[Ventru3]

Iniciado por jaspher

Hola amigo y gracias por tu respuesta, tu idea se acerca a lo que yo quiero pero lo que sucede es que no puedo escribir sobre la imagen,
Mi idea era tener una imagen de fondo para varios botones de from, los tamaños de los botones varia es por eso que la imagen se autoregule segun el tamño del boton, porfavor si fueras tan amable de ayudarme, si es posibles con java script o algo porque realmente no se como hacerlo

Lo mas fácil es que cojas un editor gráfico (paint, photoshop, etc) y en el fondo escribas el texto que quieras. Para cada botón deberas guardar una imagen si quieres que en cada uno, el texto sea diferente.

[carlospc]

El texto agregalo de la misma manera que a un buton normal... con la propiedad

value="Texto del Boton"

No deberia haber mayor problema, a la imagen de fondo puedes centralo verticalmente si deseas...

Ahora por lo de utilizar una imagen en concreto que se adapte a varios tamaños... no me la se ahorita... pero si consigo una te la paso...

Ten en cuenta que al modificar los tamaños de una imagen a una que no sea la original... esta se va ver de manera distorcionada... con poca estetica...

[BrutuSS]

Prueba a buscar en google una técnica que se llama Sliding Doors. Con esta técnica podrás hacer que el fondo de tu botón crezca según el contenido que tenga.

Espero que te sirva de ayuda !