Lenguajes
Web/Otros
Extra
Enlaces

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.

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


Redactado por Nenillo

¿Dudas? ¡Cualquier duda será atendida en nuestro Foro!

Inicio | JavaScript necesario para este enlace

Noticias en RSS2 XHTML Vlido CSS Vlido