Foros del web, para los que viven de bits

zm2175 · 19-jul-2005, 17:30

Saludos
Me he estado cabeceando buscando la forma de cambiar el estilo tipico del INPUT BUTTON.

El problema es que con el uso de CSS logro cambiarles el color, la fuente y hasta usar una imagen de fondo en degrade, pero siempre terminan siendo rectangulares!!!
Alguien sabe como usar una imagen de bordes redondeados como cuerpo del boton y que no se vea como que fuera un rectangulo con una imagen redondeada de fondo?

Asi podria diseñar botones mas interesantes y dinamicos ;)
gracias!!

iconogt · 19-jul-2005, 20:43

pues creo que es con xhtml usando image en el type luego se llama a la respectiva imagen, hmmmm creo que en las faqs de xhtml esta mejor explicado ese post, deberias darte una vuelta por alla.

Slds....

zm2175 · 20-jul-2005, 17:54

hola iconogt
Estuve revisando los tutoriales de XHTML y salen 2 formas que hacen algo parecido, pero no lo que busco

<button name="boton" type="submit"><img src="imagen.gif"> Pulsame <img src="imagen.gif"></button>
Ese permite meter una imagen en el boton y la otra permite usar una imagen como boton... cosa que con OnClick se resuelve de la misma manera.

Mi dea es usar una imagen de fondo, asi los textos del value="" podrian ser dinamicos.

Saludos y sigo esperando...

kemie · 20-jul-2005, 23:53

pues haz eso, usa una imagen de fondo:
css:
.miboton{background-image:url(path/a/tu/imagen.jpg);
background-repeat:no-repeat;
color:red;}

html
<input type="submit" class="miboton" value="Pulsame" />

zm2175 · 21-jul-2005, 20:54

Hola Kemie
Gracias por tu consejo, pero tampoco funciona...

de hecho para que funcione es necesario agregar una condicion al estilo...

background-image: url(images/bt_enviar_a.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
color:red;

zm2175 · 21-jul-2005, 20:57

sorry aprete sin querer...

como decia... es necesario que exista la condicion de color de fondo para que se visualice la imagen, pero al mostrarla, muestra tb los bordes cuadrados del boton :(

.miboton{
background-image: url(images/fondoboton.gif);
background-repeat: no-repeat;
background-color: #FFFFFF;
color:red;

Alguien tiene alguna otra idea..?

gracias

CORE · 22-jul-2005, 00:03

Se puede pero solo furula en Firefox

Código HTML:

.boton {
	text-align: center;
	background-image: url(botonsito2.gif);
	background-repeat: no-repeat;
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FF6600;
	border:1px solid #FF6600;
  	-moz-border-radius: 5px;
}

para que se vea = en todos los navegadores deberia de ser con la misma imagen

Código HTML:

<style type="text/css">
<!--
.boton {
	text-align: center;
	background-image: url(botonsito.gif);
	background-repeat: no-repeat;
	font-family: "Trebuchet MS", Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 0px none;
	color: #999;
	height: 20px;
	width: 60px;  
}
-->
</style>

zm2175 · 23-jul-2005, 14:37

Muchas gracias CORE!

esta es la condicion en el estilo que me faltaba:
border: 0px none;

Saludos y espero sea de utilidad para todos!

iconogt · 24-jul-2005, 16:39

No recordaba que había participado en este post.

, pero yo he visto que lo hacen con xhtml usando input type="image" y lo probé y funciona a la perfección.

19-jul-2005, 17:30	#1 (permalink)
zm2175 Fecha de Ingreso: marzo-2003 Ubicación: Santiago Mensajes: 47	Input Buttons con una imagen como cuerpo? Saludos Me he estado cabeceando buscando la forma de cambiar el estilo tipico del INPUT BUTTON. El problema es que con el uso de CSS logro cambiarles el color, la fuente y hasta usar una imagen de fondo en degrade, pero siempre terminan siendo rectangulares!!! Alguien sabe como usar una imagen de bordes redondeados como cuerpo del boton y que no se vea como que fuera un rectangulo con una imagen redondeada de fondo? Asi podria diseñar botones mas interesantes y dinamicos ;) gracias!! __________________ == Zmaster rulez!

19-jul-2005, 20:43	#2 (permalink)
iconogt Fecha de Ingreso: septiembre-2004 Ubicación: La tierra de Dios... Mensajes: 523	pues creo que es con xhtml usando image en el type luego se llama a la respectiva imagen, hmmmm creo que en las faqs de xhtml esta mejor explicado ese post, deberias darte una vuelta por alla. Slds.... __________________ ________________________________________ <!-- Lo que sabemos es una gota de agua; lo que ignoramos es el océano -->

20-jul-2005, 17:54	#3 (permalink)
zm2175 Fecha de Ingreso: marzo-2003 Ubicación: Santiago Mensajes: 47	hola iconogt Estuve revisando los tutoriales de XHTML y salen 2 formas que hacen algo parecido, pero no lo que busco <button name="boton" type="submit"><img src="imagen.gif"> Pulsame <img src="imagen.gif"></button> Ese permite meter una imagen en el boton y la otra permite usar una imagen como boton... cosa que con OnClick se resuelve de la misma manera. Mi dea es usar una imagen de fondo, asi los textos del value="" podrian ser dinamicos. Saludos y sigo esperando... __________________ == Zmaster rulez!

20-jul-2005, 23:53	#4 (permalink)
kemie Fecha de Ingreso: junio-2003 Ubicación: estocolmo<-->mexico Mensajes: 1.627	pues haz eso, usa una imagen de fondo: css: .miboton{background-image:url(path/a/tu/imagen.jpg); background-repeat:no-repeat; color:red;} html <input type="submit" class="miboton" value="Pulsame" /> __________________ ::::::::::::::::::::::::::::: WebHostNinja \| diseñorama.com::::::::::::::::::::::::::::::

21-jul-2005, 20:54	#5 (permalink)
zm2175 Fecha de Ingreso: marzo-2003 Ubicación: Santiago Mensajes: 47	Hola Kemie Gracias por tu consejo, pero tampoco funciona... de hecho para que funcione es necesario agregar una condicion al estilo... background-image: url(images/bt_enviar_a.gif); background-repeat: no-repeat; background-color: #FFFFFF; color:red; __________________ == Zmaster rulez!

21-jul-2005, 20:57	#6 (permalink)
zm2175 Fecha de Ingreso: marzo-2003 Ubicación: Santiago Mensajes: 47	sorry aprete sin querer... como decia... es necesario que exista la condicion de color de fondo para que se visualice la imagen, pero al mostrarla, muestra tb los bordes cuadrados del boton :( .miboton{ background-image: url(images/fondoboton.gif); background-repeat: no-repeat; background-color: #FFFFFF; color:red; Alguien tiene alguna otra idea..? gracias __________________ == Zmaster rulez!

23-jul-2005, 14:37	#8 (permalink)
zm2175 Fecha de Ingreso: marzo-2003 Ubicación: Santiago Mensajes: 47	Muchas gracias CORE! esta es la condicion en el estilo que me faltaba: border: 0px none; Saludos y espero sea de utilidad para todos! __________________ == Zmaster rulez!

24-jul-2005, 16:39	#9 (permalink)
iconogt Fecha de Ingreso: septiembre-2004 Ubicación: La tierra de Dios... Mensajes: 523	Hola, No recordaba que había participado en este post. , pero yo he visto que lo hacen con xhtml usando input type="image" y lo probé y funciona a la perfección. __________________ ________________________________________ <!-- Lo que sabemos es una gota de agua; lo que ignoramos es el océano -->

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado