Foros del Web » Creando para Internet » CSS »

Input Buttons con una imagen como cuerpo?

Estas en el tema de Input Buttons con una imagen como cuerpo? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/07/2005, 18:30
 
Fecha de Ingreso: marzo-2003
Ubicación: Santiago
Mensajes: 53
Antigüedad: 14 años, 9 meses
Puntos: 0
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!
  #2 (permalink)  
Antiguo 19/07/2005, 21:43
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
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....
__________________
_______
Jorge Rojas.
  #3 (permalink)  
Antiguo 20/07/2005, 18:54
 
Fecha de Ingreso: marzo-2003
Ubicación: Santiago
Mensajes: 53
Antigüedad: 14 años, 9 meses
Puntos: 0
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!
  #4 (permalink)  
Antiguo 21/07/2005, 00:53
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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::::::::::::::::::::::::::::::
  #5 (permalink)  
Antiguo 21/07/2005, 21:54
 
Fecha de Ingreso: marzo-2003
Ubicación: Santiago
Mensajes: 53
Antigüedad: 14 años, 9 meses
Puntos: 0
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!
  #6 (permalink)  
Antiguo 21/07/2005, 21:57
 
Fecha de Ingreso: marzo-2003
Ubicación: Santiago
Mensajes: 53
Antigüedad: 14 años, 9 meses
Puntos: 0
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!
  #7 (permalink)  
Antiguo 22/07/2005, 01:03
Avatar de CORE
Usuario no validado
 
Fecha de Ingreso: abril-2002
Ubicación: Merida
Mensajes: 2.165
Antigüedad: 15 años, 8 meses
Puntos: 3
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> 
  #8 (permalink)  
Antiguo 23/07/2005, 15:37
 
Fecha de Ingreso: marzo-2003
Ubicación: Santiago
Mensajes: 53
Antigüedad: 14 años, 9 meses
Puntos: 0
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!
  #9 (permalink)  
Antiguo 24/07/2005, 17:39
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
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.
__________________
_______
Jorge Rojas.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:19.