Cómo hacer un texto Enlace Mira como un botón biselado Con CSS

Un menú en una página web es realmente nada más que una lista de enlaces. El tipo más accesible de menú se compone de texto, no imágenes. Con un poco de CSS, un enlace de texto puede parecer un botón biselado. Estos son los pasos para lograrlo.

Instrucciones

1

Comience con un viejo y simple lista desordenada en el HTML de su página web. Dar la lista un id.

2 En su hoja de estilos CSS que tiene que hacer varias cosas para hacer que el aspecto lista como botones biselados. Comience por labrar la propia lista. Retire las balas y ajustar los márgenes y el relleno para adaptarse a su diseño. nav ul {

list-style: none;
margin: 0;
padding: 0;
padding-top: 1 em;
}

3 Si desea que la lista para mostrar horizontalmente en la parte superior de la página web, añadir esta regla CSS para la hoja de estilo:

li {nav

display: inline;
}

4 Asignar algunas reglas de estilo CSS para el color, color de fondo y propiedades de borde a la a: link y a: elementos visitados. El color de fondo y las fronteras van a crear una apariencia semejante a un botón biselado del enlace de texto.

Algo como esto:

nav a: link, #nav a: visited {

color: # 000;
background-color: # D6AE00;
border-top: 1px #CCC sólida;
border-right: 1px solid # 666;
border-bottom: 1 px sólida # 666;
border-left: 1 px sólida #CCC;
}

5 Para dar una apariencia de estar deprimido el botón cuando está en estado estacionario, basta con invertir los colores de la frontera.

Algo como esto:

nav a: hover {

border-top: 1px solid # 666;
border-right: #CCC sólido 1px;
border-bottom: 1 px sólida #CCC;
border-left: 1 px sólida # 666;
}

6 Usted puede experimentar con los colores, utilizar una imagen de fondo en lugar de simplemente un color de fondo y hacer muchas cosas con el relleno y la colocación de este menú, pero usted tiene los fundamentos de crear la ilusión botón biselado en CSS con sólo esta cantidad de código.