Cómo activar los enlaces en los botones para la programación html5 y css3

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

Video: Como hacer boton de ir arriba con HTML, CSS y javascript

li #menu {list-style-type: 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 de enlaces ordinaria en un grupo de botones de este tipo es simplemente una aplicación de trucos CSS:

Video: Diseño Web - Crear Botones en HTML5 y CSS3

1. Comience con una lista ordinaria que validará correctamente.

   Video: botones de enlaces externos e internos HTML y CSS

   No importa si utiliza una lista ordenada o no. Por lo general, la lista contendrá los anclajes 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. Encerrar la lista en un div llamado.

   Video: Tutoriales HTML5 + CSS3 - 03 Etiquetas Semánticas e Icono de Pagina

   Por lo general, usted todavía tiene enlaces ordinarios en una página. Para indicar que estos enlaces del menú deben ser manejados 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 anclas sólo cuando están dentro de un div.

7. Retire las balas mediante el establecimiento de la list-style-type a ninguna.

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

   #menu li {list-style-type: none; anchura: 5em-text-align: center-margin-left: -2.5em-}

8. Especificar la anchura de cada botón:

    anchura: 5em-

   Un grupo de botones se ve mejor si son todos del mismo tamaño. Utilizar el CSS anchura 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 unos para hacer espacio para las viñetas o números. Debido a que esta lista no tendrá balas, que no necesita las muescas. Sobreescribir el comportamiento por defecto de sangría mediante el establecimiento de un negativo margin-left valor.

10. Limpiar el anclaje mediante el establecimiento text-decoration a ninguna 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;}

    el aspecto del botón dejará en 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 de una sombra caja, como se muestra en la siguiente:

     box-shadow: 5px 5px 5px de grises

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

12. Ajuste el anclaje de monitor a bloquear.

    Este es un truco astuto. Visualización de secuencia normalmente hace un acto elemento como un elemento en 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 más fácil de usar, ya que el ratón tiene un objetivo mucho más grande para aspirar a:

     bloqueo de pantalla-

13. Proporcionar un pequeño hueco 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 borde para las esquinas redondeadas.

    El uso de la frontera de radio propiedad le da las esquinas redondeadas un efecto agradable, mejorando la sensación botón.

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

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

16. Hacer que el apretado el pulsador 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ño, 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 en conjunto dan una convincente ilusión del botón de estar deprimido.

Esta lista hace un menú de navegación ideal, especialmente cuando se coloca dentro de una columna de una disposición 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 otro abajo) en el editor de imágenes y simplemente intercambiar las imágenes de fondo en lugar de cambiar las sombras. Algunas variaciones también involucran el cambio de la frontera.