domingo, 10 de noviembre de 2013

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

Usar CSS para hacer botones de enlace en su página web.

 

BOTÓN

Botones del Web site son tradicionalmente creado en una aplicación de gráficos, 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 se vean como botones. Una vez que el enlace está codificado en HyperText Markup Language (HTML), puede asignar la regla de CSS en el código, lo que evita la necesidad de imágenes.

 

Abra un documento en el sitio web de tu programa de edición de texto. Coloque el cursor antes de la etiqueta de cierre / cabeza y escriba el siguiente código CSS:

 

Tipo style = "text / css"

 

a.button {}

 

/ Estilo

 

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

 

Escriba "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: Canto 4px;}

 

Tipo "padding:;" e introduzca un valor de píxeles para especificar la cantidad de espacio en blanco entre el botón de texto y el contorno. Adicionalmente, introduzca "font:;" y escriba un tamaño de píxel y la tipografía para el botón de texto. Su código completo CSS ahora similar al siguiente ejemplo:

 

a.button {border: Canto 4px;

 

Fuente: 12px Arial, sans-serif;}

 

Coloque el cursor donde usted quiere que su enlace aparezca el botón e introduzca el código de anclaje que crea un vínculo:

 

a href = "Dirección URL aquí" Botón de Texto / a

 

Escriba "class =" dentro del elemento de anclaje de apertura 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 final se verá así:

 

a = "Dirección URL aquí" clase href = "button" Botón de Texto / a

 

Guarde el archivo.

 

 

No hay comentarios:

Publicar un comentario