Foros del Web - Input Buttons con una imagen como cuerpo?

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Input Buttons con una imagen como cuerpo? (http://www.forosdelweb.com/f53/input-buttons-con-imagen-como-cuerpo-318134/)

zm2175

19/07/2005 17:30

Input Buttons con una imagen como cuerpo?

Saludos
Me he estado cabeceando buscando la forma de cambiar el estilo tipico del INPUT BUTTON. :golpeado: 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? :neurotico

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

iconogt

19/07/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/07/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... :pirata:

kemie

20/07/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/07/2005 20:54

Hola Kemie
Gracias por tu consejo, pero tampoco funciona... :no:
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/07/2005 20:57

sorry aprete sin querer... :borracho:
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..? :-D
gracias

CORE	22/07/2005 00:03

Se puede pero solo furula en Firefox
http://www.geistek.com/images/botonsito2.gif

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
http://www.geistek.com/images/botonsito.gif

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/07/2005 14:37

Muchas gracias CORE! :aplauso:
esta es la condicion en el estilo que me faltaba:
border: 0px none;

Saludos y espero sea de utilidad para todos!

iconogt

24/07/2005 16:39

Hola,

No recordaba que había participado en este post. :borracho: , pero yo he visto que lo hacen con xhtml usando input type="image" y lo probé y funciona a la perfección. :arriba:

La zona horaria es GMT -6. Ahora son las 06:43.