Exemple de bouton avec survol 1 en CSS

Survolez 1 CSS
Pour cet exemple, nous devons avoir 3 images qui fonctionneront comme ;
Repos

Sur

Tenu vers le bas

Ensuite, dans le corps de notre site, nous avons ceci
Code:


DÉBUT

Et donc pour tous nos boutons, après que nous devrons utiliser CSS, nous commençons par ce code :
Code:

# bot1 {
bordure: 0 0 0 0 ;
remplissage: 0 ;
text-align: centre ;
}
Là où nous disons que nous ne voulons pas de marge extérieure et intérieure, nous alignons le texte au centre, maintenant nous continuons avec ce code :
Code:

# bot1 à {
image d'arrière-plan: URL (bg_menu_1.jpg);
position d'arrière-plan: centre en haut ;
hauteur: 30px ;
largeur: 100 pixels ;
bloc de visualisation;
couleur: # 990000 ;
texte-décoration: aucun ;
rembourrage haut: 5px ;
background-repeat: pas de répétition ;
font-weight: gras ;
}
Qu'il est pratiquement celui qui fait tout, voyons ligne par ligne
image d'arrière-plan: URL (bg_menu_1.jpg);
Avec cela, nous disons que nous voulons une image de fond et nous donnons le chemin de cette
position d'arrière-plan: centre en haut ;

Avec cela, nous indiquons que la position de l'image d'arrière-plan sera centrée et vers le haut.
background-repeat: pas de répétition ;
Pour que l'arrière-plan ne se répète pas comme s'il s'agissait d'un motif.
hauteur: 30px ;
largeur: 100 ;
Nous vous disons que la hauteur sera de 30 et la largeur de 100px qui sont les dimensions de nos images de fond.
bloc de visualisation;
Pour qu'il génère et respecte une case avec les mesures que nous avons mises avant.
couleur: # 990000
Avec cela, nous ne donnons qu'une couleur au texte qui se trouve à l'intérieur de notre boîte.
texte-décoration: aucun ;
C'est pour éviter la ligne qui est en dessous des liens.
rembourrage haut: 5px ;
Pour que j'économise un espace de 5px dans la partie haute de notre lien et avec cela il abaisse la position au centre de notre box.
font-weight: gras ;
Met les lettres en gras
Ensuite, vous n'avez plus qu'à ajouter des classes pour les pseudo éléments "hover" et "focus"
Code:

# bot1 a: survolez {
image d'arrière-plan: URL (bg_menu_2.jpg);
}
# bot1 à: focus {
image d'arrière-plan: URL (bg_menu_3.jpg);
}
Mais comme nous le réalisons, nous n'avons changé que le chemin de nos images d'arrière-plan pour obtenir l'effet que nous recherchions.
Le code de notre exemple de survol en css indiqué ci-dessous:
Code:








DÉBUT


Et les images peuvent être téléchargées à partir de cette page, en faisant un clic droit sur l'image et en l'enregistrant sous.