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

Αυτό το ιστολόγιο θα σας διδάξει τη διαδικασία που σχετίζεται με την αλλαγή του χρώματος του κουμπιού με το κλικ. Για αυτό, πρώτα, μάθετε για την :active pseudo-class.

Λοιπόν, ας ξεκινήσουμε!

Τι είναι το ':active' στο CSS;

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

Σύνταξη

' ένα ” αναφέρεται στο στοιχείο HTML στο οποίο θα εφαρμοστεί η κλάση :active.

Ας κατευθυνθούμε προς ένα παράδειγμα για να κατανοήσουμε τη δηλωμένη έννοια.

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

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

HTML

Στη συνέχεια, στο CSS, ορίστε το χρώμα του κουμπιού. Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε ' .btn ' για να αποκτήσετε πρόσβαση στο κουμπί και να ορίσετε το χρώμα του κουμπιού ως ' rgb(0, 255, 213) '.

CSS

Μετά από αυτό, εφαρμόστε :active pseudo-class στο κουμπί ως ' .btn:ενεργός ' και ορίστε το χρώμα του κουμπιού που θα εμφανίζεται στην ενεργή του κατάσταση ως ' rgb(123, 180, 17) ”:

Αυτό θα δείξει το ακόλουθο αποτέλεσμα:

Τώρα, ας προσθέσουμε την επικεφαλίδα με την ετικέτα

και το όνομα κλάσης κουμπιού ' κουμπί ”, μέσα στην ετικέτα .

HTML

< κέντρο >

< h1 > Αλλαγή χρώματος κουμπιού < / h1 >

< κουμπί τάξη = 'κουμπί' > Κάντε κλικ στο Me < / κουμπί >

< / κέντρο >

Στη συνέχεια, θα μεταφερθούμε στο CSS και θα εφαρμόσουμε το κουμπί :active σε αυτό. Για να γίνει αυτό, θα ορίσουμε το στυλ περιγράμματος ως ' κανένας ' και δώστε padding ως ' 15 εικονοστοιχεία '. Μετά από αυτό, ορίστε το χρώμα του κειμένου του κουμπιού ως ' rgb(50, 0, 54) 'και το υπόβαθρό του ως ' rgb(177, 110, 149) ' και η ακτίνα του ως ' 15 εικονοστοιχεία ”:

.κουμπί {

σύνορο : κανένας ;

υλικό παραγεμίσματος : 15 εικονοστοιχεία ;

χρώμα : rgb ( πενήντα , 0 , 54 ) ;

χρώμα του φόντου : rgb ( 177 , 110 , 149 ) ;

σύνορα-ακτίνα : 15 εικονοστοιχεία ;

}

Αυτό θα δείξει το ακόλουθο αποτέλεσμα:

Μετά από αυτό, θα εφαρμόσουμε :active pseudo-class στο κουμπί ως ' .button:ενεργό ' και ορίστε το χρώμα ενός κουμπιού ως ' rgb(200, 255, 0) ”:

.κουμπί : ενεργός {

χρώμα του φόντου : rgb ( 200 , 255 , 0 ) ;

}

Αφού εφαρμόσετε όλο τον παραπάνω κώδικα, μεταβείτε στο αρχείο HTML και εκτελέστε το για να δείτε το αποτέλεσμα:

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

συμπέρασμα

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