Input Buttons con una imagen como cuerpo?

[zm2175]

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]

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]

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]

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]

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]

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]

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]

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]

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.