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

- Estilos CSS distintos con PHP y cookies
- Bisel exterior con CSS
- Comentarios en CSS
- Centrar imágenes con CSS
- Estilos en formularios: Bordes llamativos para campos de formulario en CSS

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