Botones de Formulario con CSS

Sin CSS, estábamos bastante limitados en cuanto al diseño de algunos elementos de la web como por ejemplo los botones de los formularios. Vamos a ver como gracias a CSS tenemos mucha más libertad a la hora de darle estilo a nuestros botones.

<input type="button" value="Botón con CSS" style="border: #66FF66 1px solid; font-family: Verdana; font-size: 10px; background-color: #DEDEDE; font-weight: bold">

En el ejemplo vemos varias propiedades CSS, "border" define el borde del color, la anchura y el tipo, en este caso el color es "#66FF66", la anchura "1px" y el tipo "solid". El resto es el tipo de fuente, el tamaño de la fuente, el color de fondo y el peso de la fuente, negrita en este caso.

Aquí puedes ver el ejemplo:

Como vemos, de esta forma lo podemos adaptar mucho mejor a nuestros gustos y necesidades. También podemos hacer cosas un poco más rebuscadas, como cambiar el tamaño del botón o la alineación del texto y también cosas como poner el borde de rayas discontinuas. Veamos:

Esto lo hemos conseguido así:

<input name="button" type="button" style="border: #66FF66 1px dashed; font-family: Verdana; font-size: 10px; text-align: left; width: 100; height: 25; background-color: #DEDEDE; font-weight: bold" value="Bot&oacute;n con CSS">

Le hemos dado 100 píxeles de ancho y 25 de alto. Además hemos alineado el texto a la izquierda y hemos puesto un borde menos usual.

Estos estilos no solo se pueden aplicar a botones, los podemos aplicar a muchos elementos. Lo mejor es que investigues por tu cuenta.

Por Alex Barroso
Director Técnico de WebTaller