Création de boutons en CSS
Présentation du menu du haut en boutons, à l'aide des bordures gérées par le CSS.
Dans le code vous remarquerez que la différence de style de la bordure et de la couleur, au survol de la souris, en rouge.
.diz-barre-navigation{
background: transparent;
}
.diz-barre-navigation a {
background: #16A5A2;
padding: 2px 10px;
color: #FFFFFF;
border: 1px ridge #F0F0F0;
}
.diz-barre-navigation a:hover {
color: #000000;
border: 1px groove #606060;
}
Deuxième présentation, mais en faisant remonter le menu sur le logo.
Ce qui change dans le code, c'est la marge négative de la barre, en rouge.
.diz-barre-navigation{
background: transparent;
margin-top: -40px;
}
.diz-barre-navigation a {
background: #16A5A2;
padding: 2px 10px;
color: #FFFFFF;
border: 1px ridge #F0F0F0;
}
.diz-barre-navigation a:hover {
color: #000000;
border: 1px groove #606060;
}
Dans cette troisième présentation, boutons arrondis et ombrés, avec le CSS3.
Le code en rouge pour les coins arrondis et en vert pour l'ombre.
.diz-barre-navigation{
background: transparent;
margin-top: -40px;
}
.diz-barre-navigation a {
background: #16A5A2;
padding: 2px 10px;
color: #FFFFFF;
border: 2px ridge #F0F0F0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 4px 12px #666;
-moz-box-shadow: 2px 4px 12px #666;
box-shadow: 2px 4px 12px #666;
}
.diz-barre-navigation a:hover {
color: #000000;
border: 2px groove #101010;
}
Les codes ci-dessus sont à coller dans la zone de personnalisation du CSS de l'assistant du DizPerso.
Exemple de code collé dans la zone.
Si votre espace de gestion est ouvert, cliquez sur : lien
Propriétés que vous pouvez utiliser dans la même règle : .diz-barre-navigation a
ou .diz-barre-navigation a:hover
| Taille des caractères : | font-size: 12px; |
| Italique : | font-style: italic; |
| Gras : | font-weight: bold; |
| Petites capitales : | font-variant: small-caps; |
| Minusucules : | text-transform: lowercase; |
| Majuscules : | text-transform: uppercase; |
| Première lettre de chaque mot en majuscule : | text-transform: capitalize; |
| Pour que le texte reste comme il est saisi : | text-transform: none; |
Exemple de code pour centrer le texte du lien, comme ci-dessous.
.diz-barre-navigation a {
text-align : center;
}
.diz-barre-navigation a:hover {
text-align : center;
}
Code pour les 3 alignements :
| Alignement centré : | text-align: center; |
| Alignement à droite : | text-align: right; |
| Alignement à gauche : | text-align: left; |
Et même le modifier si vous connaissez le CSS.
Si cet article vous a été utile, un petit J'aime me fera plaisir.
N'hésitez pas un mettre un commentaire, si vous avez apprécié cet article, mais également si vous n'êtes pas pleinement satisfait.
Pour plus d'explications poster sur le forum
A découvrir aussi
- Barre de navigation
- Tutoriel - Barre de navigation avec image et texte
- Personnalisation du Menu du haut
Inscrivez-vous au blog
Soyez prévenu par email des prochaines mises à jour
Rejoignez les 167 autres membres