Comment faire pour activer des liens dans des boutons pour HTML5 et CSS3 programmation

En ce qui concerne le code HTML5 est concerné, il est tout simplement une liste de liens. Il n'y a rien de spécial ici qui rend cet acte comme un groupe de boutons, à l'exception de la création d'un div appelé menu. Tout le travail réel se fait en CSS:

#menu li {list-style-type: none; largeur: 7em-text-align: center-margin-left: -2.5em -} # menu à {text-decoration: none; color: black-display: block-fond -couleur: # EEEEFF-box-shadow: 5px 5px 5px gris-margin-bottom: 2px;} # menu à: hover {background-color: # DDDDEE-box-shadow: 3px 3px 3px gris-border: none;}

Le processus pour transformer une liste ordinaire de liens dans un groupe de bouton de ce type est tout simplement une application des astuces CSS:

1. Commencez avec une liste ordinaire qui permettra de valider correctement.

   Il n'a pas d'importance si vous utilisez une liste non ordonnée ou ordonné. Typiquement, la liste contiendra ancres vers d'autres pages. Cet exemple utilise une liste de liens vers des sites Web populaires:

2. Google
3. Wiley
4. Wikipédia
5. Reddit

6. Joindre la liste dans un div nommé.

   Typiquement, vous avez encore des liens ordinaires sur une page. Pour indiquer que ces liens du menu devraient être traités différemment, les mettre dans un div nommé menu. Toutes les astuces CSS style décrits ici se réfèrent à des listes et des ancres seulement quand ils sont dans un div.

7. Retirer les balles en réglant le list-style-type à aucun.

   Cela supprime les puces ou les numéros qui apparaissent habituellement dans une liste parce que ces caractéristiques distraire de l'effet que vous visez (un groupe de boutons). Utilisez CSS pour spécifier comment les éléments de liste doivent être formatés quand ils apparaissent dans le contexte de la menu ID:

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

8. Spécifiez la largeur de chaque bouton:

    largeur: 5em-

   
   
   
   
   

   Un groupe de boutons semble la meilleure si elles sont toutes de la même taille. Utilisez le CSS largeur attribuer à régler chaque li à 5em.

9. Retirer la marge en utilisant un négatif margin-left valeur, comme indiqué ici:

    margin-left: -2.5em-

   Listes ont une empreinte d'environ par défaut pour faire place à des puces ou des numéros. Parce que cette liste ne sera pas avoir des balles, il n'a pas besoin des empreintes. Ecraser le comportement de l'indentation par défaut en définissant sur une valeur négative margin-left valeur.

10. Nettoyer l'ancre en réglant text-decoration à aucun et la mise en couleur de l'ancre à quelque chose de statique, tels que du texte noir sur bleu clair dans cet exemple:

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

    L'apparence du bouton, il sera clair que les utilisateurs peuvent cliquer sur, donc ceci est un endroit où vous pouvez supprimer le soulignement qui va normalement avec des liens.

11. Donnez à chaque bouton une boîte ombre, comme le montre ce qui suit:

     box-shadow: 5px 5px 5px gris-

    L'ombre fait ressembler à un bouton 3D qui sort de la page. Le mieux est attaché à l'ancre, de sorte que vous pouvez échanger la frontière lorsque la souris survole le bouton.

12. Réglez l'ancre de afficher à bloc.

    Ceci est un truc sournois. Affichage de bloc fait normalement un acte de l'élément comme un élément de niveau bloc à l'intérieur de son récipient. Dans le cas d'une ancre, le bouton devient cliquable entière, et pas seulement le texte. Cela rend votre page facile à utiliser parce que la souris a un beaucoup plus grand objectif à atteindre:

     affichage: d'îlot

13. Fournir un petit espace pour séparer chaque élément.

    Utilisez le margin-bottom exclure pour séparer chaque bouton. Cela permettra d'améliorer l'effet 3D en faisant les ombres plus évident.

    margin-bottom: 2px;

14. Fournir un rayon de la frontière pour des coins arrondis.

    Utilisation de la border-radius propriété donne les coins un bel effet arrondi, l'amélioration de la touche sensation.

15. Utilisez une frontière de départ pour un peu plus de dimension.

    Réglage de la frontière pour départ peut donner les boutons un peu plus appel 3D.

16. Faites le bouton déprimer lorsque la souris survole un point d'ancrage sur:

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

    Lorsque la souris survole le bouton, l'ombre est plus petite, et la couleur de l'élément de fond est plus sombre. Vous pouvez également supprimer la frontière, rendant le bouton sentir plat. Ces techniques donnent ensemble une illusion convaincante de la touche étant déprimé.

Cette liste permet un menu de navigation idéal, en particulier lorsqu'il est placé à l'intérieur d'une colonne d'un agencement flottant multicolonne.

L'astuce de l'ombre est facile, mais il ya beaucoup de variations. Si vous préférez, vous pouvez construire deux boutons images vides (un haut et un en bas) dans votre éditeur d'images et de les échanger simplement les images de fond plutôt que de changer les ombres. Certaines variations impliquent également changer la frontière.