Ένα κουμπί είναι ένα θεμελιώδες μέρος της HTML που εκτελεί διάφορες εργασίες. Χρησιμοποιώντας CSS, μπορείτε να σχεδιάσετε και να διαμορφώσετε το κουμπί. Υπάρχουν διάφοροι τρόποι σχεδιασμού του κουμπιού, όπως χρωματισμός του κουμπιού, αλλαγή μεγέθους, τοποθέτηση του ποντικιού και πολλά άλλα.

Σε αυτό το άρθρο, πρώτα, θα μάθουμε πώς να δημιουργήσουμε ένα κουμπί και, στη συνέχεια, να αλλάξουμε το χρώμα ενός κουμπιού στο δείκτη του ποντικιού.

Ας αρχίσουμε!

Πώς να αλλάξετε το χρώμα του κουμπιού στο Hover στο CSS;

Στο CSS, ' :φτερουγίζω ' χρησιμοποιείται για την αλλαγή του χρώματος του κουμπιού κατά την αιώρηση. ' :φτερουγίζω ” είναι μια ψευδοκλάση που επιτρέπει την αλλαγή της συμπεριφοράς των στοιχείων HTML όταν το ποντίκι πάνω του, όπως στοιχεία όπως σύνδεσμοι, κουμπιά, εικόνες και πολλά άλλα.

Η σύνταξη του :φτερουγίζω παρέχεται παρακάτω.

Σύνταξη

Στην παραπάνω παρεχόμενη σύνταξη, ' ένα ' αναφέρεται στο στοιχείο HTML όπου το ' :φτερουγίζω ' εφαρμόζεται. Στο CSS, μπορείτε να ορίσετε τη συμπεριφορά του δείκτη του ποντικιού των στοιχείων HTML, όπως το χρώμα, το μέγεθος και το πλάτος του στοιχείου.

Βήμα 1: Δημιουργία Div and Button

Στο HTML, πρώτα, θα δημιουργήσουμε ένα div και θα προσθέσουμε μια επικεφαλίδα με

και ένα κουμπί χρησιμοποιώντας μια ετικέτα. Εδώ, θα εκχωρήσουμε το όνομα της τάξης του κουμπιού ως ' btn ' και το κείμενο του κουμπιού ως ' Περάστε πάνω μου '.

HTML

Το αποτέλεσμα του προαναφερόμενου κώδικα δίνεται παρακάτω. Μπορείτε να δείτε ότι η επικεφαλίδα και το κουμπί έχουν δημιουργηθεί:

Τώρα, μεταβείτε στο CSS για να διαμορφώσετε το div και να τα κουμπιά ένα προς ένα.

Βήμα 2: Κουμπί στυλ και Div

Αρχικά, θα διαμορφώσουμε το δημιουργημένο κοντέινερ χρησιμοποιώντας ' div '. Στη συνέχεια, θα ορίσουμε το ύψος του div ως ' 250 εικονοστοιχεία ' και το χρώμα φόντου ως ' rgb(199, 173, 192) '. Θα χρησιμοποιήσουμε επίσης την ιδιότητα περιγράμματος για να προσαρμόσουμε το περίγραμμα του div, πλάτος ως ' 5 εικονοστοιχεία ', στυλ ως ' στερεός ' και χρωματίστε ως ' rgb(40, 2, 55) '.

CSS

Η έξοδος που δίνεται παρακάτω υποδεικνύει ότι το προστιθέμενο στυλ εφαρμόζεται με επιτυχία στο div:

Στο επόμενο βήμα, θα κάνουμε στυλ στο κουμπί χρησιμοποιώντας CSS.

Τώρα, θα διαμορφώσουμε το κουμπί χρησιμοποιώντας ' .btn ” για πρόσβαση στο κουμπί που δημιουργείται σε HTML. Μετά από αυτό, θα κρύψουμε το περίγραμμα του κουμπιού ορίζοντας ' κανένας ” ως συνοριακή αξία ακινήτου. Μετά από αυτό, θα προσαρμόσουμε το μέγεθος της γραμματοσειράς σε ' μεγάλο ' και η συμπλήρωση του κουμπιού σε ' 10 εικονοστοιχεία ” για να δημιουργήσετε κενά μεταξύ του περιεχομένου του κουμπιού και του περιγράμματος του κουμπιού. Στο τέλος, θα ορίσουμε το χρώμα του κειμένου και του φόντου ως ' rgb(50, 0, 54) ' και ' rgb(193, 54, 135) ”:

Το κουμπί είναι τώρα διαμορφωμένο:

Περαιτέρω, θα εφαρμόσουμε ' :φτερουγίζω ” για να αλλάξετε το χρώμα ενός κουμπιού κατά την τοποθέτηση του δείκτη.

Βήμα 3: Αλλαγή χρώματος κουμπιού στο Hover

Τώρα, θα χρησιμοποιήσουμε ' .btn:hover ” για να συνδέσετε το κουμπί με το στοιχείο ψευδο-κλάσης του δείκτη. Ως αποτέλεσμα, θα εφαρμοστεί το δείκτη του ποντικιού στο κουμπί. Στη συνέχεια, θα ορίσουμε το χρώμα φόντου και το χρώμα κειμένου του κουμπιού ως ' rgb(66, 2, 41) ' και ' rgb(119, 255, 0) '. Αυτά τα χρώματα θα εφαρμοστούν στο κουμπί όταν το ποντίκι πάνω του:

Στην παρακάτω παρεχόμενη έξοδο, μπορείτε να δείτε ότι το χρώμα του κουμπιού αλλάζει όταν ένα ποντίκι αιωρείται πάνω του:

Αυτό είναι! Έχουμε εξηγήσει τη μέθοδο αλλαγής του χρώματος του κουμπιού κατά την τοποθέτηση του ποντικιού χρησιμοποιώντας CSS.

συμπέρασμα

Για να αλλάξετε το χρώμα ενός κουμπιού κατά την αιώρηση, το ' :φτερουγίζω Χρησιμοποιείται το στοιχείο ψευδο-κλάσης. Για να το κάνετε αυτό, συνδέστε το κουμπί με το :hover και ορίστε το χρώμα του κουμπιού, το οποίο θα αλλάξει όταν θα τοποθετήσουμε τον δείκτη του ποντικιού πάνω του. Σε αυτό το άρθρο, εξηγήσαμε τη μέθοδο αλλαγής του χρώματος του κουμπιού κατά την τοποθέτηση του δείκτη και παρέχουμε ένα παράδειγμα.