Personalizar 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.

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í:

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.

Redactado por Nenillo