Cómo eliminar el subrayado de los enlaces 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