Jack Fiallos Blog (AkKa Erling) Vida, Curiosidad y Proyectos

Es hora de cambiar la apariencia de los botones en nuestras web y una buena forma es utilizando la etiqueta <button> disponible para HTML o xHTML. Muy similiar a la etiqueta <input type=”button”> ambas etiquetas tienen la propiedad de enviar submit o reset a un formulario y aunque su funcion es la misma, a la hora de pensar en accesibilidad la etiqueta <button> es mucho mejor ya que permite ser personalizada mediante el uso de CSS y no solo eso, tambien permite escribir dentro de si misma otras etiquetas html extendiendo la funcionalidad y ofreciendo extension en un solo boton.

Y ya dejo tanta palabreria que no me lleva a ningun lado y dejo un pequeño codigo que permite personalizar esta etiqueta haciendola un poco mas vistosa y llamativa a la vista. La tecnica de maquetado utiliza sliding doors, pueden encontrar mas informacion acerca del tema en el blog de alistapart.

Por alguna razon y que no se han puesto de acuerdo los desarrolladores de los browsers el boton tiende a funcionar diferente, pero no es nada serio que un buen framework (“otra vez con la misma cancion”) no pueda arreglar.

El codigo a utilizar en html es:

1
2
3

<button class="submit" type="button">
   <div><div>Guardar</div></div>
</button>

Y el codigo css asociado a este boton seria:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

button.submit {
   background:transparent none repeat scroll 0%;
   border:medium none;
   clear:left;
   color:#FFFFFF;
   cursor:pointer;
   font-family:Arial,Helvetica,Sans-serif;
   font-size:1em;
   font-size-adjust:none;
   font-stretch:normal;
   font-style:normal;
   font-variant:normal;
   font-weight:bold;
   line-height:normal;
   margin:0pt;
   padding:0pt;
}
 
button.submit {
   outline-color:invert;
   outline-style:none;
   outline-width:medium;
}
 
button.submit div {
   margin:0;
   padding:0 0 0 15px;
   background:transparent url(f_boton_izq.png) left top no-repeat;
   cursor:pointer
}
 
button.submit div div {
   margin:0;
   padding:0 15px 0 0;
   line-height:31px;
   background:transparent url(f_boton_der.png) right top no-repeat
}
 
* html button.submit {
   overflow:visible
}
 
button.submit:hover div {
   background-position:left -41px
}
 
button.submit:hover div div {
   background-position:right -41px;
}

Puedes ver un ejemplo del resultado final haciendo click aqui.

De paso dejo las imagenes que utilice para hacer el ejemplo:

About the author

Erling Fiallos wrote 296 articles on this blog.

Profesional en el Desarrollado de aplicaciones web, usuario de linux, fanático de la tecnología. Arquitecto de interfaces apasionado uso de los estándares web Usabilidad/Accesibilidad.. En el camino he aprendido mucho sobre diseño y me dedico a mejorar las aplicaciones pensando en que toda la web debe de ser accesible para todas las personas. Parte activa en el equipo de desarrollo y consultoría de Qbit Mexhico.

• Blog
• Twitter

Entradas Similares:

1. Utilizando Favicon en nuestras páginas
2. Implementando un ToDo con jQuery para tu aplicacion Web
3. Personalizando Alert en Flex
4. Usabilidad y menus de navegacion
5. Librerías para manipular SVG