|
(Alguno de los ejemplos sólo funcionan en Internet Explorer)
- La clase de estilo requiere unos pocos bytes de código frente al peso de las imágenes.
- En general los botones mediante una imagen tienen un largo concreto, con lo que, o se utiliza una imágen para cada uno de los botones que usemos o le echamos mucha imaginación y bastante conocimiento para encontrar una alternativa.
- Con botones-CSS en cualquier momento.que nos cansemos del aspecto de los botones, cambiamos todos de un plumazo sin apenas esfuerzo.
En CSS hay una gran variedad de estilos de botones. Mezclado con colores de "background", colores de "foreground", colores y anchos de "bordes" y un poco de imaginación, hace verdaderamente difícil de justificar el uso de imágenes para estos menesteres.
Quizá presenten única desventaja frente a los resuieltos mediante imagenes que estos, al ser pintados, admiten infinitas psibilidades de diseño.
Sin embargo los botones mediante clases de estilo tienen ventajas contundentes:
A continuación se muestran ejemplos andjuntando la codificación de la correspondiente clase de estilo:
| Botón | Clase de estilo |
|
|
{background: #D4D0C8;color: #000000;font-size: 11px;padding: 0px 5px;font-weight: normal;text-decoration: none;border: 1px solid #000000;font-family: Verdana, Arial, Helvetica, sans-serif;} |
|
|
{background: #D4D0C8;color: #000000;font-size: 11px;padding: 0px 5px;font-weight: normal;text-decoration: none;border: 3px double #000000;font-family: Verdana, Arial, Helvetica, sans-serif;} |
|
|
{background: #D4D0C8;color: #000000;font-size: 11px;padding: 0px 5px;font-weight: normal;text-decoration: none;border: 1px dotted #000000;font-family: Verdana, Arial, Helvetica, sans-serif;} |
|
|
{background: #D4D0C8;color: #000000;font-size: 11px;padding: 0px 5px;font-weight: normal;text-decoration: none;border: 1px dashed #CC0000;font-family: Verdana, Arial, Helvetica, sans-serif;} |
|
|
{background: #D4D0C8;color: #000000;font-size: 11px;padding: 0px 5px;font-weight: normal;text-decoration: none;border: 2px outset #F8F3EA;font-family: Verdana, Arial, Helvetica, sans-serif;} |
|
|
{background: #D4D0C8;color: #000000;font-size: 11px;padding: 0px 5px;font-weight: normal;text-decoration: none;border: 2px inset #F8F3EA;font-family: Verdana, Arial, Helvetica, sans-serif;} |
|
|
{background: #D4D0C8;color: #000000;font-size: 11px;padding: 0px 5px;font-weight: normal;text-decoration: none;border: 3px ridge #F8F3EA;font-family: Verdana, Arial, Helvetica, sans-serif;} |
|
|
{background: #D4D0C8;color: #000000;font-size: 11px;padding: 0px 5px;font-weight: normal;text-decoration: none;border: 3px groove #F8F3EA;font-family: Verdana, Arial, Helvetica, sans-serif;} |
Se obtienen curiosas diferencias, tanto en la sensanción de profundidad como en la suavidad de aristas, variando la relación de colores de "background" y "foreground".
| Botones | Äreas de trabajo | Textos | Menús | Barras de Herramientas | Posicionamiento de objetos | Ocultar objetos |  |
| WebUsable.com | © Todos los derechos reservados. |
|
