 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Botones y CSS
Explicamos las mejoras que pueden obtenerse por el uso de hojas de estilo en la creación de formularios y, más concretamente, los botones de envío.
09/9/02 -
Las Hojas de Estilos en Cascada (CSS) son sin duda una de las herramientas más útiles que podemos usar en nuestras páginas web. Nos permiten definir el aspecto con el que se van a presentar todos y cada uno de los elementos de una página web, consiguiendo con ello la buscada separación entre datos y presentación, tan buscada por los desarrolladores.
Mediante CSS podemos mejorar notablemente el aspecto de nuestros botones de formulario, siempre y cuando el navegador usado por nuestro visitante soporte la aplicación de estilos a estos elementos, es decir, todos los navegadores de 5ª y 6ª generación.
| Referencia: Dispones en DesarrolloWeb de un manual de hojas de estilo CSS que te enseñará a utilizar esta tecnología para crear páginas más atractivas y precisas. |
Como ejemplo, vamos a modificar el aspecto externo del botón de la página anterior, dándole un fondo azul, quitándole el aspecto 3D y poniendo el texto en blanco, con fuente Verdana de 10 pixels. También vamos a definir su tamaño exacto. El código necesario será:
|
<style type="text/css"> .boton{ font-size:10px; font-family:Verdana,Helvetica; font-weight:bold; color:white; background:#638cb5; border:0px; width:80px; height:19px; } </style> <div align="center"> <form name="form1" action="http://www.yahoo.es" target="_blank" method="post"> <input type="text" name="prueba"><br><br> <input type="submit" value="enviar" class="boton"> </form> </div> |
Cuyo resultado es el siguiente:
Analizando un poco el código anterior, vemos que hemos definido una clase de estilo, .boton, que define los atributos deseados para nuestro botón. La clase viene definida estableciendo, dentro de las etiquetas <style...>...</style> el nombre de la misma precedido por un punto, unas llaves y dentro de ellas los atributos deseados con sus valores.
De esta forma podemos fijar el aspecto concreto de nuestros botones, teniendo libertad para defirnir cuantas clases necesitemos.
Como ventajas de este método están la total configuración de aspecto y que seguimos teniendo un botón submit estándar (por lo que si pulsamos la tecla Enter se enviarán los datos del formulario). Las pegas son que estas características de estilos para botones no son aceptadas por Netscape 4x y que seguimos teniendo la limitación de botones rectangulares.
+ 2 categorias relacionadas
+ 1 comentario (Añadir)
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Luciano Moreno*
Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario. URL: http://www.htmlweb.net/ Atención: Contenido exclusivo de DesarrolloWeb.com y HTMLWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
+ Entrar en CSS
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestra un comentario revisado |
Es por ello que en Netscape 4, aunque si funcionan las CSS, estos estilos para los botones no los podrás ver funcionar.
 | Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||
Tienda DesarrolloWeb
