Botones y CSS. ¡Descubre cómo!

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.

Fuente:enlace