Cómo cambiar la apariencia de un botón en CSS

Bueno, sólo deberemos agregar esta pequeña porción de código dentro de la marca input, que es justamente la que genera nuestro botón.

<input onClick="#" type="button" value="Botón de ejemplo" name="boton"
style="BORDER: rgb(128,128,128) 1px solid; FONT-SIZE: 8pt; FONT-FAMILY: Verdana;
BACKGROUND-COLOR: rgb(233,233,233)">

Les estamos diciendo que utilice un borde de color claro, con un tipo de linea sólido y que aparezca el texto dentro de él, con el tipo de fuente verdana, tamaño 8pt.

El resultado sería este:

Fijate que pasa cuando modifico la propiedad del tipo de borde.

<input onClick="#" type=button value="Botón de ejemplo" name="boton"
style="BORDER: rgb(128,128,128) 1px dashed; FONT-SIZE: 8pt; FONT-FAMILY: Verdana;
BACKGROUND-COLOR: rgb(233,233,233)">

El resultado sería este:

A continuación detallaré los posibles tipos de bordes que hay:

Este tipo de bordes a través de estilos puede ser aplicado a menús desplegables, botones, cajas de texto, radio button, checkbox y textarea.

Autor: Gamarod
http://www.gamarod.com.ar

Usuarios que han visto este tema también han visto...

- 10 errores comunes en CSS
- Puertas deslizantes con CSS
- Pseudoclases de CSS
- Efectos sobre elementos Input
- Cómo usar fuentes personalizadas mediante CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento