Eine Schaltfläche ist ein grundlegender Bestandteil von HTML, der verschiedene Aufgaben erfüllt. Mithilfe von CSS können Sie die Schaltfläche gestalten und gestalten. Es gibt verschiedene Möglichkeiten, die Schaltfläche zu gestalten, z. B. das Einfärben der Schaltfläche, das Ändern der Größe, das Bewegen des Mauszeigers und vieles mehr.

In diesem Artikel lernen wir zuerst, wie man eine Schaltfläche erstellt und dann die Farbe einer Schaltfläche beim Hover ändert.

Lass uns anfangen!

Wie ändere ich die Farbe der Schaltfläche beim Hover in CSS?

Im CSS „ :schweben “ wird verwendet, um die Farbe der Schaltfläche beim Hover zu ändern. „ :schweben “ ist eine Pseudo-Klasse, die es ermöglicht, das Verhalten der HTML-Elemente zu ändern, wenn Sie mit der Maus darüber fahren, wie z. B. Elemente wie Links, Schaltflächen, Bilder und vieles mehr.

Die Syntax von :schweben ist unten angegeben.

Syntax

In der oben angegebenen Syntax „ a “ bezieht sich auf das HTML-Element, in dem „ :schweben ' wird angewandt. In CSS können Sie das Hover-Verhalten der HTML-Elemente festlegen, z. B. die Farbe, Größe und Breite des Elements.

Schritt 1: Erstellen Sie Div und Button

Im HTML erstellen wir zuerst ein div und fügen eine Überschrift mit

und eine Schaltfläche mit einem Tag hinzu. Hier weisen wir den Klassennamen der Schaltfläche als „ btn “ und der Schaltflächentext als „ Schwebe auf mir “.

HTML

Das Ergebnis des oben erwähnten Codes ist unten angegeben. Sie können sehen, dass die Überschrift und die Schaltfläche erstellt werden:

Wechseln Sie nun zum CSS, um das div und die Schaltfläche nacheinander zu formatieren.

Schritt 2: Style Button und Div

Zuerst gestalten wir den erstellten Container mit „ div “. Dann setzen wir die Höhe des div als „ 250px “ und die Hintergrundfarbe als „ RGB(199, 173, 192) “. Wir werden auch die Border-Eigenschaft verwenden, um den Rand des div anzupassen, width als „ 5px “, Stil als „ fest “ und Farbe als „ RGB(40, 2, 55) “.

CSS

Die unten angegebene Ausgabe zeigt an, dass der hinzugefügte Stil erfolgreich auf das div angewendet wurde:

Im nächsten Schritt gestalten wir die Schaltfläche mit CSS.

Jetzt gestalten wir die Schaltfläche mit „ .btn “, um auf die Schaltfläche zuzugreifen, die in HTML erstellt wird. Danach blenden wir den Rand der Schaltfläche aus, indem wir „ keiner ” als Eigenschaftswert der Grenze. Danach passen wir die Schriftgröße auf „ groß “ und die Polsterung des Buttons auf „ 10px “, um Leerzeichen zwischen dem Inhalt der Schaltfläche und dem Rand der Schaltfläche zu erstellen. Am Ende legen wir die Farbe des Textes und des Hintergrunds fest als „ RGB(50, 0, 54) ' und ' RGB(193, 54, 135) “:

Die Schaltfläche ist jetzt gestylt:

Außerdem werden wir uns bewerben „ :schweben “, um die Farbe einer Schaltfläche beim Hover zu ändern.

Schritt 3: Ändern Sie die Farbe der Schaltfläche beim Hover

Jetzt verwenden wir „ .btn:schweben “, um die Schaltfläche mit dem Hover-Pseudoklassenelement zu verknüpfen. Als Ergebnis wird Hover auf die Schaltfläche angewendet. Als nächstes setzen wir die Hintergrundfarbe und die Textfarbe der Schaltfläche als „ RGB(66, 2, 41) ' und ' RGB(119, 255, 0) “. Diese Farben werden auf die Schaltfläche angewendet, wenn Sie mit der Maus darüber fahren:

In der unten bereitgestellten Ausgabe können Sie sehen, dass sich die Farbe der Schaltfläche ändert, wenn Sie mit der Maus darüber fahren:

Das ist es! Wir haben die Methode zum Ändern der Schaltflächenfarbe beim Hover mit CSS erklärt.

Fazit

Um die Farbe einer Schaltfläche beim Hover zu ändern, das „ :schweben ” Pseudoklassenelement wird verwendet. Verknüpfen Sie dazu die Schaltfläche mit :hover und legen Sie die Farbe der Schaltfläche fest, die sich ändert, wenn wir mit der Maus darüber fahren. In diesem Artikel haben wir die Methode zum Ändern der Farbe der Schaltfläche beim Hover erklärt und ein Beispiel dafür bereitgestellt.