Comment faire un look de lien texte comme un bouton biseauté avec css

Instructions

1. Commencez par une ancienne liste non ordonnée plaine dans le code HTML de votre page Web. Donnez la liste un id.

   

2. Dans votre feuille de style CSS vous devez faire plusieurs choses pour rendre la liste regard comme des boutons biseautés. Commencez par coiffer la liste elle-même. Retirez les balles et ajuster les marges et le remplissage en fonction de votre conception.

   nav ul {

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

3. 
   
   
   
   

   Si vous voulez la liste pour afficher horizontalement à travers le haut de votre page Web, ajoutez cette règle CSS à la feuille de style:

   nav li {

   affichage: inline-
   }

4. Attribuer des règles de style CSS pour la couleur, la couleur d`arrière-plan et les propriétés des frontières à l`a: link et un: éléments visités. La couleur de fond et les frontières vont créer une apparence comme un bouton biseauté sur le lien de texte.

   Quelque chose comme ca:

   nav a: link, #nav a: visited {

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

5. Pour donner une apparence du bouton étant enfoncé dans l`état stationnaire, il suffit d`inverser les couleurs de bordure.

   Quelque chose comme ca:

   nav a: hover {

   border-top: 1px solid # 666-
   border-right: 1px solid # CCC-
   border-bottom: 1 px solid # CCC-
   border-left: 1 px solid # 666-
   }

6. Vous pouvez expérimenter avec les couleurs, utiliser une image de fond plutôt que de simplement une couleur de fond et de faire beaucoup de choses avec le rembourrage et le placement de ce menu, mais vous avez les bases de la création du bouton illusion biseauté en CSS avec juste ce beaucoup de code.