Die Schaltfläche ist ein klickbares Element, das zur Ausführung einer bestimmten Aktion verwendet wird. Mit CSS können Sie verschiedene Schaltflächenstile festlegen. Die Farbe einer Taste kann mit dem CSS eingestellt werden “:aktivPseudoklasse.

In diesem Blog werden Ihnen das Verfahren zum Ändern der Schaltflächenfarbe beim Klick beigebracht. Darüber hinaus lernen Sie die: aktive Pseudoklasse.

Also beginnen wir beginnen!

Was ist „: aktiv“ in CSS?

Die Schaltflächenfarbe beim Klicken in CSS ist mit Hilfe des “möglich:aktivPseudoklasse. In HTML zeigt es ein Element an, das aktiviert wird, wenn der Benutzer darauf klickt. Darüber hinaus beginnt die Aktivierung bei der Verwendung einer Maus, wenn die Maus -Taste gedrückt wird.

Syntax

A: aktiv
Farbe grün;

“A”Bezieht sich auf das HTML -Element, auf das die aktive Klasse angewendet wird.

Gehen wir zu einem Beispiel, um das angegebene Konzept zu verstehen.

So ändern Sie die Schaltfläche Farbe beim Klicken in CSS?

Um die Farbe einer Schaltfläche bei Klicken zu ändern, erstellen Sie zunächst eine Schaltfläche in einer HTML -Datei und weisen Sie den Klassennamen zu “zu“Btn”.

Html

Taste

Setzen Sie in CSS die Farbe der Taste. Um dies zu tun, werden wir verwenden “.Btn”Um auf die Schaltfläche zuzugreifen und die Farbe der Schaltfläche als" einzustellenRGB (0, 255, 213)”.

CSS

.btn
Hintergrundfarbe: RGB (0, 255, 213);

Danach bewerben Sie sich: Aktive Pseudoklasse auf der Schaltfläche als ".BTN: Active"Und setzen Sie die Farbe der Schaltfläche, die in seinem aktiven Zustand als" angezeigt wird "RGB (123, 180, 17)”:

.BTN: Active
Hintergrundfarbe: RGB (123, 180, 17);

Dies zeigt das folgende Ergebnis:

Lassen Sie uns nun die Überschrift mit hinzufügen

Tag- und Schaltflächenklassenname “Taste”, Innerhalb des Tags.

Html

Schalttenfarbe ändern

Klick mich

Als nächstes wechseln wir zu CSS und stylen die Taste und bewerben. Zu diesem Zweck werden wir den Grenzstil als "als" festlegen "keiner"Und geben Sie die Polsterung als"15px”. Setzen Sie danach die Farbe des Schaltflächentextes als "RGB (50, 0, 54)Und sein Hintergrund als "RGB (177, 110, 149)", Und sein Radius als" als "15px”:

.Taste
Grenze: Keine;
Polsterung: 15px;
Farbe: RGB (50, 0, 54);
Hintergrundfarbe: RGB (177, 110, 149);
Border-Radius: 15px;

Dies zeigt das folgende Ergebnis:

Danach werden wir uns bewerben: Aktive Pseudoklasse auf der Schaltfläche als “.Taste: aktiv”Und stellen Sie die Farbe einer Taste als" ein "RGB (200, 255, 0)”:

.Taste: aktiv
Hintergrundfarbe: RGB (200, 255, 0);

Sobald Sie den gesamten oben genannten 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 die Schaltfläche angeklickt wird. Die Farbe wird gemäß dem angegebenen RGB -Farbcode geändert.

Abschluss

So ändern Sie die Schaltflächenfarbe beim Klicken in CSS, die “:aktivPseudoklasse kann verwendet werden. Insbesondere kann es das Tastenelement darstellen, wenn es aktiviert wird. Mit dieser Klasse können Sie verschiedene Schaltflächenfarben festlegen, wenn die Maus darauf klickt. Dieser Artikel erläuterte die Prozedur zum Ändern der Schaltflächenfarbe beim Klicken in CSS.