Cómo hacer un Botón de Enlace en CSS

botones de sitio web se crean tradicionalmente en una aplicación gráfica, pero usted tiene la opción de usar Cascading Style Sheets (CSS) para realizar esta tarea. CSS le da la capacidad de crear reglas que diseñan sus enlaces para que luzcan igual que los botones. Una vez que el enlace está codificado en HyperText Markup Language (HTML), puede asignar la regla CSS a su código, lo que evita la necesidad de imágenes.

Instrucciones

1 Abrir un documento de página web en su programa editor de texto. Coloque el cursor antes de la etiqueta de cierre </ head> y escriba el siguiente código CSS:

<Style type = "text / css">

un botón { }

</ Style>

La entrada "a.button {}" crea una regla de estilo que maneja los botones de enlace en su página.

2 Introduzca "border:;" entre las llaves y escriba un valor numérico en píxeles (px) para especificar el ancho del borde alrededor de su botón de enlace. Además, escriba un estilo de borde, tales como "canto" o "principio", para crear un esquema que aparece en tres dimensiones. Por ejemplo:

a.button {border: 4PX canto; }

3 Tipo "padding:;" e introduzca un valor de píxeles para especificar la cantidad de espacio en blanco entre el texto del botón y el esquema. Además, introduzca "font:;" y escriba un tamaño de píxel y el tipo de letra para el texto del botón. Su código CSS completa ahora similar al ejemplo siguiente:

a.button {border: 4PX canto;

font: 12px arial, sans-serif; }

4 Coloque el cursor donde desea que el botón de enlace que aparezca y escriba el código de anclaje que crea un vínculo:

<a href="URL dirección here"> Texto del botón </a>

5 Enter "class =" dentro del elemento de apertura de anclaje y tipo "botón" entre comillas para asignar la regla CSS que los estilos de su enlace como un botón. El código HTML terminado ahora se ve así:

<a href="URL dirección here" class="button"> Texto del botón </a>

6 Guarde el archivo.