Schaltfläche ist ein anklickbares Element, das verwendet wird, um eine bestimmte Aktion auszuführen. Mit CSS können Sie verschiedene Stile für Schaltflächen festlegen. Einer davon ist, die Farbe einer Schaltfläche beim Klicken zu ändern. Die Farbe eines Buttons kann mit dem CSS „ :aktiv „Pseudo-Klasse.
In diesem Blog erfahren Sie, wie Sie die Schaltflächenfarbe beim Klicken ändern. Lernen Sie dazu zunächst die Pseudo-Klasse :active kennen.
Fangen wir also an!
Was ist „:active“ in CSS?
Das Ändern der Schaltflächenfarbe beim Klicken in CSS ist mit Hilfe des „ :aktiv „Pseudo-Klasse. In HTML zeigt es ein Element an, das aktiviert wird, wenn der Benutzer darauf klickt. Darüber hinaus beginnt bei Verwendung einer Maus die Aktivierung, wenn die Maustaste gedrückt wird.
Syntax
a : aktiv {
Farbe : grün ;
}
„ a ” bezieht sich auf das HTML-Element, auf das die :active-Klasse angewendet wird.
Gehen wir zu einem Beispiel, um das genannte Konzept zu verstehen.
Wie ändere ich die Farbe der Schaltfläche beim Klicken in CSS?
Um die Farbe einer Schaltfläche beim Klicken zu ändern, erstellen Sie zunächst eine Schaltfläche in einer HTML-Datei und weisen Sie den Klassennamen „ btn “.
HTML
< Karosserie >< Taste Klasse = 'btn' > Taste < / Taste >
< / Karosserie >
Legen Sie als Nächstes in CSS die Farbe der Schaltfläche fest. Dazu verwenden wir „ .btn “, um auf die Schaltfläche zuzugreifen und die Farbe der Schaltfläche als „ RGB(0, 255, 213) “.
CSS
.btn {Hintergrundfarbe : rgb ( 0 , 255 , 213 ) ;
}
Wenden Sie danach :active pseudo-class auf die Schaltfläche als „ .btn: aktiv “ und legen Sie die Farbe der Schaltfläche fest, die im aktiven Zustand angezeigt wird, als „ RGB(123, 180, 17) “:
.btn : aktiv {Hintergrundfarbe : rgb ( 123 , 180 , 17 ) ;
}
Dies zeigt das folgende Ergebnis:
Lassen Sie uns nun die Überschrift mit dem Tag
und dem Namen der Schaltflächenklasse hinzufügen. Taste “, innerhalb des -Tags.
HTML
< Center >
< h1 > Schaltflächenfarbe ändern < / h1 >
< Taste Klasse = 'Taste' > Klick mich < / Taste >
< / Center >
Als Nächstes wechseln wir zu CSS, formatieren die Schaltfläche und wenden :active darauf an. Dazu setzen wir den Rahmenstil auf „ keiner “ und geben Sie Polsterung als „ 15px “. Stellen Sie danach die Farbe des Schaltflächentextes als „ RGB(50, 0, 54) “ und sein Hintergrund als „ RGB(177, 110, 149) “ und sein Radius als „ 15px “:
.Taste {
Grenze : keiner ;
Polsterung : 15px ;
Farbe : rgb ( fünfzig , 0 , 54 ) ;
Hintergrundfarbe : rgb ( 177 , 110 , 149 ) ;
Grenzradius : 15px ;
}
Dies zeigt das folgende Ergebnis:
Danach wenden wir :active pseudo-class auf die Schaltfläche als „ .Schaltfläche: aktiv “ und legen Sie die Farbe einer Schaltfläche fest als „ RGB(200, 255, 0) “:
.Taste : aktiv {
Hintergrundfarbe : rgb ( 200 , 255 , 0 ) ;
}
Sobald Sie den gesamten obigen Code implementiert haben, gehen Sie zur HTML-Datei und führen Sie sie aus, um das Ergebnis zu überprüfen:
Aus der Ausgabe kann beobachtet werden, wenn auf die Schaltfläche geklickt wird, ändert sich ihre Farbe gemäß dem angegebenen RGB-Farbcode.
Fazit
Um die Schaltflächenfarbe beim Klicken in CSS zu ändern, muss das „ :aktiv ” Pseudo-Klasse verwendet werden. Genauer gesagt kann es das Schaltflächenelement darstellen, wenn es aktiviert wird. Mit dieser Klasse können Sie verschiedene Schaltflächenfarben festlegen, wenn die Maus darauf klickt. In diesem Artikel wurde das Verfahren zum Ändern der Schaltflächenfarbe beim Klicken in CSS erläutert.
HTML
< Center >< h1 > Schaltflächenfarbe ändern < / h1 >
< Taste Klasse = 'Taste' > Klick mich < / Taste >
< / Center >
Als Nächstes wechseln wir zu CSS, formatieren die Schaltfläche und wenden :active darauf an. Dazu setzen wir den Rahmenstil auf „ keiner “ und geben Sie Polsterung als „ 15px “. Stellen Sie danach die Farbe des Schaltflächentextes als „ RGB(50, 0, 54) “ und sein Hintergrund als „ RGB(177, 110, 149) “ und sein Radius als „ 15px “:
.Taste {Grenze : keiner ;
Polsterung : 15px ;
Farbe : rgb ( fünfzig , 0 , 54 ) ;
Hintergrundfarbe : rgb ( 177 , 110 , 149 ) ;
Grenzradius : 15px ;
}
Dies zeigt das folgende Ergebnis:
Danach wenden wir :active pseudo-class auf die Schaltfläche als „ .Schaltfläche: aktiv “ und legen Sie die Farbe einer Schaltfläche fest als „ RGB(200, 255, 0) “:
.Taste : aktiv {Hintergrundfarbe : rgb ( 200 , 255 , 0 ) ;
}
Sobald Sie den gesamten obigen Code implementiert haben, gehen Sie zur HTML-Datei und führen Sie sie aus, um das Ergebnis zu überprüfen:
Aus der Ausgabe kann beobachtet werden, wenn auf die Schaltfläche geklickt wird, ändert sich ihre Farbe gemäß dem angegebenen RGB-Farbcode.
Fazit
Um die Schaltflächenfarbe beim Klicken in CSS zu ändern, muss das „ :aktiv ” Pseudo-Klasse verwendet werden. Genauer gesagt kann es das Schaltflächenelement darstellen, wenn es aktiviert wird. Mit dieser Klasse können Sie verschiedene Schaltflächenfarben festlegen, wenn die Maus darauf klickt. In diesem Artikel wurde das Verfahren zum Ändern der Schaltflächenfarbe beim Klicken in CSS erläutert.