Foros del Web » Creando para Internet » CSS »

personalizar button

Estas en el tema de personalizar button en el foro de CSS en Foros del Web. 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...
  #1 (permalink)  
Antiguo 12/06/2008, 01:19
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
Pregunta personalizar button

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
__________________
gerardo
  #2 (permalink)  
Antiguo 12/06/2008, 12:53
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: personalizar button

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
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 12/06/2008, 14:32
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 14 años, 4 meses
Puntos: 21
Sonrisa Respuesta: personalizar button

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
__________________
gerardo
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 16:21.