personalizar button

[chalchis]

hola amigos saben como puedo personalizar un button agregrandole una imagen como icono de un form asi como este ejemplo

http://extjs.com/explorer/#basicbuttons

saludos

espero sus comentarios

[emiliodeg]

fijate en el codigo que estan utilizando

<table id="my-129" class="x-btn-wrap x-btn x-btn-text-icon" cellspacing="0" cellpadding="0" border="0" style="width: auto;"><img class="twisty"><tbody>
<img class="twisty"><tr>
<img class="twisty"><td class="x-btn-left">
</td>

<img class="twisty"><td class="x-btn-center">
<img class="twisty"><em unselectable="on">
<button class="x-btn-text icon-printer" type="button" tabindex="0">Icon Button</button>


</em>


</td>

<img class="twisty"><td class="x-btn-right">
</td>


</tr>


</tbody>


</table>


es una tabla a la que le van a gregando mas y mas estilos para dar el efecto de boton con icono, se podria utilizar algun fondo y simpliicarlo unp oco

[chalchis]

orale si que es algo demasiando para un estilo de button, observando lo que me has comentado
he hecho esto
.css

Código:

.btn_fondo
{
background-image: url(../Imagen/Botones_accion/fondobtn.gif);
border-color: #CCCCCC #CCCCCC #CCCCCC #CCCCCC;
border-bottom-style:solid;
border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px;
height:24px;
padding:0;
margin:0;
width:auto;
overflow:visible;				
text-align:center;	
white-space:nowrap;
cursor:pointer;
color: #000000;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
.iconbtn
{
display:block;
line-height:20px;			
margin:0;
padding-left:35px;
}
.icobtntext
{
display:block;
line-height:24px;			
margin:0;
padding-right:20px;	
}
.btn_fondo_over
{
background-image: url(../Imagen/Botones_accion/fondobtn_over3.gif);
border-color: #990000 #990000 #990000 #990000;
border-top-width: 1px; border-right-width: 1px;
border-bottom-width: 1px; border-left-width: 1px;
height:24px;
padding:0;
margin:0;
width:auto;
overflow:visible;				
text-align:center;	
white-space:nowrap;
cursor:pointer;
color: #990000;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

en el html

Código:

<button name="btn_buscar" value="buscar" class="btn_fondo" type="submit" title="buscar" alt="buscar">
	<span id="icon" class="iconbtn" style="background-image:url(fondobtn_find.gif); background-repeat:no-repeat; border:none;"><span id="icobtntext" class="textbtn">buscar</span></span>
	</button>

use un .gif de 24 x 24 px

espero tus comentarios
saludos
y gracias