Schaltflächenbeispiel mit Rollover 1 in CSS

Rollover 1 CSS
Für dieses Beispiel müssen wir 3 Bilder haben, die funktionieren als;
Ruhe

Auf

Niedergehalten

Dann haben wir dies im Hauptteil unserer Website
Code:


ANFANG

Und so beginnen wir für alle unsere Schaltflächen, nachdem wir CSS verwenden müssen, mit diesem Code:
Code:

#bot1 {
Grenze: 0 0 0 0;
Polsterung: 0;
Textausrichtung: Mitte;
}
Wo wir sagen, dass wir keinen äußeren und inneren Rand wollen, richten wir den Text mittig aus, jetzt geht es mit diesem Code weiter:
Code:

# bot1 bis {
Hintergrundbild: URL (bg_menu_1.jpg);
Hintergrundposition: Mitte oben;
Höhe: 30px;
Breite: 100px;
Bildschirmsperre;
Farbe: # 990000;
Textdekoration: keine;
Polsterung-Oberseite: 5px;
Hintergrundwiederholung: keine Wiederholung;
Schriftdicke: fett;
}
Dass er praktisch alles macht, sehen wir uns Zeile für Zeile an
Hintergrundbild: URL (bg_menu_1.jpg);
Damit sagen wir, dass wir ein Hintergrundbild wollen und geben den Weg dazu
Hintergrundposition: Mitte oben;
Damit weisen wir darauf hin, dass die Position des Hintergrundbildes zentriert und nach oben gerichtet ist.

Hintergrundwiederholung: keine Wiederholung;
Damit sich der Hintergrund nicht wie ein Muster wiederholt.
Höhe: 30px;
Breite: 100;
Wir sagen ihm, dass die Höhe 30 und die Breite 100 Pixel betragen wird, was die Abmessungen unserer Hintergrundbilder sind.
Bildschirmsperre;
Damit es eine Kiste mit den Maßnahmen, die wir zuvor gesetzt haben, generiert und respektiert.
Farbe: # 990000
Damit geben wir nur dem Text, der sich in unserer Box befindet, eine Farbe.
Textdekoration: keine;
Vermeiden Sie die Linie, die sich unter den Links befindet.
Polsterung-Oberseite: 5px;
Damit spare ich im oberen Teil unseres Links einen Platz von 5px und senkt damit die Position auf die Mitte unserer Box ab.
Schriftdicke: fett;
Macht die Buchstaben fett
Dann müssen Sie nur noch Klassen für die Pseudoelemente "hover" und "focus" hinzufügen
Code:

# bot1 a: schweben {
Hintergrundbild: URL (bg_menu_2.jpg);
}
# bot1 an: Fokus {
Hintergrundbild: URL (bg_menu_3.jpg);
}
Aber wie wir feststellen, haben wir nur den Pfad unserer Hintergrundbilder geändert, um den gewünschten Effekt zu erzielen.
Der Code unserer Rollover-Beispiel in CSS unten gezeigt:
Code:








ANFANG


Und die Bilder können von dieser Seite heruntergeladen werden, indem Sie mit der rechten Maustaste auf das Bild klicken und speichern unter.