Botones y CSS

  • 09 de septiembre de 2002
  • Valoración:
  • 6 Comentarios
  • Manuales de HTML, 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.

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.

Autor

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.

Comentarios

Miguel Angel Alvarez

10/10/2002
Como hemos visto, se pueden aplicar estilos muy atractivos a los botones con las Hojas de Estilo en Cascada (CSS). Sin embargo, estas hojas de estilo no funcionan en todos los navegadores y en algunos como Netscape 4.X no están totalmente implementadas.

Es por ello que en Netscape 4, aunque si funcionan las CSS, estos estilos para los botones no los podrás ver funcionar.

07009

30/6/2009
DUDA
hola, yo quiero saber como ago que cuando aprieten el boton enviar me mande un correo con la informacion que puso el usuario
por favor mandame un correo a la siguiente direccion
prosakterruben16@hotmail.com

Muchas gracias, me han servido de mucho tus tutoriales [manuales]
Hasta pronto

Octavio

20/11/2009
Como cuadrar dos botones con css
Hola muy explicativo tu articulo de botones con css pero yo tengo un problema tengo 2 botones uno de enviar y otro de limpiar osea de reset el formulario cuando quiero cuadralos que queden en la misma linea y centrados se me descuadra el formulario ayudenme y orientenme en una solucion practica

Itsasiak

06/2/2011
Duda sobre la propiedad de iluminación de los botones
Hola,

me están resultando muy útiles los artículos del sitio (éste y muchos otros), y quisiera preguntar una cosa:

Cuando utilizas la etiqueta <button> para generar un botón, en la web se ilumina el mismo al pasar el ratón por encima. Sin embargo, al darle un formato mediante un css parece que esta propiedad se pierde. ¿Cómo se puede conservar esto?

Muchas gracias!!

Edgar

29/3/2012
:)
Muchas Gracias

santics

28/6/2012
Enabled ON y OFF
Hola,<br />
<br />
¿Y para controlar que al desactivar el botón, este tenga un color diferente?<br />
<br />
Saludos y gracias :)

Compartir