Cómo activar enlaces en los botones para HTML5 y CSS3 programación

En lo que se refiere al código de HTML5, es simplemente una lista de enlaces. No hay nada especial aquí que hace que este acto como un grupo de botones, excepto la creación de un div llamado menú. Todo el trabajo real se realiza en CSS:

#menu li {de tipo lista style: none; anchura: 7em text-align: center-margin-left: -2.5em -} # menú a {text-decoration: none; color: negro-display: block-fondo -color: # EEEEFF-box-shadow: 5px 5px 5px gris-margin-bottom: 2px;} # menú a: hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px gris-border: none;}

El proceso para convertir una lista común de los vínculos en un grupo de botones como este es simplemente una aplicación de trucos CSS:

1. Comience con una lista común que validará correctamente.

   No importa si utiliza una lista desordenada u ordenado. Por lo general, la lista contendrá anclas a otras páginas. En este ejemplo se utiliza una lista de enlaces a algunos sitios web populares:

2. Google
3. Wiley
4. Wikipedia
5. Reddit

6. Incluya la lista en un div llamado.

   Por lo general, usted todavía tiene vínculos ordinarios en una página. Para indicar que estos enlaces del menú debe ser manejado de manera diferente, los puso en un div llamado menú. Todos los trucos de estilo CSS que se describen aquí se refieren a las listas y anclajes sólo cuando están dentro de un div.

7. Retire las balas estableciendo la -style-type lista a ninguno.

   Esto elimina las viñetas o los números que suelen aparecer en una lista porque estas características distraen del efecto que usted está apuntando para (un grupo de botones). Usar CSS para especificar cómo deben ser formateados elementos de lista cuando aparecen en el contexto de la menú ID:

   #menu li {de tipo lista style: none; anchura: 5em text-align: center-margin-left: -2.5em-}

8. Especifique el ancho de cada botón:

    ancho: 5em-

   Un grupo de botones se ve mejor si son todos del mismo tamaño. Utilice la CSS ancho atribuir a establecer cada li a 5em.

9. Retire el margen mediante el uso de un negativo margin-left valor, como se muestra aquí:

    margin-left: -2.5em-

   Las listas tienen una muesca por defecto de punto de dar cabida a las viñetas o números. Debido a que esta lista no tendrá balas, no necesitará las hendiduras. Sobrescribir el comportamiento sangrado por defecto estableciendo a un negativo margin-left valor.

10. Limpie el ancla mediante el establecimiento de text-decoration a ninguno y establecer el color del ancla para algo estático, como texto negro en azul claro en este ejemplo:

    #menu a {text-decoration: none; color: negro-display: block-background-color: # EEEEFF-box-shadow: 5px 5px 5px gris-margin-bottom: 2px;}

    La apariencia del botón se deja claro que los usuarios pueden hacer clic en él, por lo que este es un lugar que puede quitar el subrayado que normalmente va con enlaces.

11. Dé a cada botón una sombra caja, como se muestra en la siguiente:

     box-shadow: 5px 5px 5px grises

    La sombra hace que parezca un botón 3D que salen de la página. Esto se recomienda fijar el ancla, para que puedas cambiar la frontera cuando esté el ratón sobre el botón.

12. Ajuste el anclaje de visualización a bloque.

    Este es un truco astuto. Visualización de secuencia normalmente hace un acto elemento como un elemento a nivel de bloque dentro de su contenedor. En el caso de un ancla, el botón se convierte en toda puede hacer clic, no sólo el texto. Esto hace que su página sea más fácil de usar porque el ratón tiene un objetivo mucho más grande para aspirar a:

     bloqueo de pantalla-

13. Proporcionar un pequeño espacio para separar cada elemento.

    Utilizar el margin-bottom gobernar para separar cada botón. Esto mejorará el efecto 3D al hacer las sombras más evidente.

    margin-bottom: 2px;

14. Proporcionar un radio de frontera para las esquinas redondeadas.

    El uso de la border-radius propiedad da las esquinas un bonito efecto redondeado, mejorando el botón sensación.

15. Utilice una frontera primer momento por un poco más dimensión.

    Ajuste de la frontera para un principio puede dar los botones un poco más atractivo 3D.

16. Aproveche al deprimir el botón cuando el ratón pasa sobre un ancla:

    #menu a: hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px gris-border: none;}

    Cuando se pasa el ratón sobre el botón, la sombra es más pequeña, y el color de fondo del elemento es más oscuro. También puede quitar la frontera, por lo que el botón se siente plana. Estas técnicas juntos dan una ilusión convincente del botón está deprimido.

Esta lista hace un menú de navegación ideal, especialmente cuando se coloca dentro de una columna de un diseño flotante de varias columnas.

El truco sombra es fácil, pero hay muchas variaciones. Si lo prefiere, puede crear dos imágenes de los botones vacíos (uno arriba y uno abajo) en su editor de imágenes y simplemente cambiar las imágenes de fondo en lugar de cambiar las sombras. Algunas variaciones implican también el cambio de la frontera.