Παράδειγμα κουμπιού με ανατροπή 1 σε CSS

Rollover 1 CSS
Για αυτό το παράδειγμα πρέπει να έχουμε 3 εικόνες που θα λειτουργούν ως:
Ανάπαυση

Επί

Κρατήθηκε

Τότε στο σώμα του ιστότοπού μας έχουμε αυτό
Κώδικας:


ΑΡΧΗ

Και έτσι για όλα τα κουμπιά μας, αφού πρέπει να χρησιμοποιήσουμε CSS, ξεκινάμε με αυτόν τον κωδικό:
Κώδικας:

# bot1 {
περίγραμμα: 0 0 0 0;
επένδυση: 0;
text-align: center;
}
Όπου λέμε ότι δεν θέλουμε εξωτερικό και εσωτερικό περιθώριο, ευθυγραμμίζουμε το κείμενο με το κέντρο, τώρα συνεχίζουμε με αυτόν τον κωδικό:
Κώδικας:

# bot1 έως {
background-image: url (bg_menu_1.jpg);
φόντο-θέση: κεντρική κορυφή;
ύψος: 30px;
πλάτος: 100px;
οθόνη: μπλοκ;
χρώμα: # 990000;
διακόσμηση κειμένου: κανένα;
επένδυση: 5px;
επανάληψη φόντου: όχι-επανάληψη;
γραμματοσειρά: έντονο;
}
Ότι είναι ουσιαστικά αυτός που κάνει τα πάντα, ας δούμε γραμμή προς γραμμή
background-image: url (bg_menu_1.jpg);
Με αυτό λέμε ότι θέλουμε μια εικόνα φόντου και δίνουμε την πορεία αυτού
φόντο-θέση: κεντρική κορυφή;
Με αυτό δείχνουμε ότι η θέση της εικόνας φόντου θα είναι κεντραρισμένη και προς τα πάνω.

επανάληψη φόντου: όχι-επανάληψη;
Για να μην επαναληφθεί το φόντο σαν να ήταν μοτίβο.
ύψος: 30px;
πλάτος: 100;
Σας λέμε ότι το ύψος θα είναι 30 και πλάτος 100 εικονοστοιχεία που είναι οι διαστάσεις των εικόνων φόντου μας.
οθόνη: μπλοκ;
Για να δημιουργεί και να σέβεται ένα κουτί με τα μέτρα που έχουμε θέσει πριν.
χρώμα: # 990000
Με αυτό δίνουμε μόνο ένα χρώμα στο κείμενο που βρίσκεται μέσα στο κουτί μας.
διακόσμηση κειμένου: κανένα;
Είναι να αποφύγετε τη γραμμή που βρίσκεται κάτω από τους συνδέσμους.
επένδυση: 5px;
Για να εξοικονομήσω χώρο 5px στο πάνω μέρος του συνδέσμου μας και με αυτό μειώνει τη θέση στο κέντρο του κουτιού μας.
γραμματοσειρά: έντονο;
Κάνει τα γράμματα έντονα
Τότε πρέπει απλώς να προσθέσετε μαθήματα για τα ψευδο στοιχεία "hover" και "focus"
Κώδικας:

# bot1 α: αιωρηθείτε {
background-image: url (bg_menu_2.jpg);
}
# bot1 έως: εστίαση {
φόντο-εικόνα: url (bg_menu_3.jpg);
}
Αλλά όπως συνειδητοποιούμε, αλλάξαμε μόνο το μονοπάτι των εικόνων του φόντου μας για να επιτύχουμε το αποτέλεσμα που αναζητούσαμε.
Ο κωδικός μας παράδειγμα ανατροπής σε css Φαίνεται παρακάτω:
Κώδικας:








ΑΡΧΗ


Και οι εικόνες μπορούν να ληφθούν από αυτήν τη σελίδα, κάνοντας δεξί κλικ στην εικόνα και αποθηκεύοντας ως.