Ein Knopf ist ein grundlegender Bestandteil von HTML, der verschiedene Aufgaben ausführt. Durch die Verwendung von CSS können Sie den Knopf entwerfen und stylen. Es gibt verschiedene Möglichkeiten, die Schaltfläche zu entwerfen, z. B. das Färben der Schaltfläche, die Größe, das Schweben und viele mehr.

In diesem Artikel lernen wir zuerst, wie Sie eine Schaltfläche erstellen, und ändern dann die Farbe einer Schaltfläche auf dem Schwebe.

Lass uns anfangen!

So ändern Sie die Schaltflächenfarbe auf dem Schwebe in CSS?

In CSS, “:schweben”Wird verwendet, um die Farbe der Schaltfläche beim Schwebezustand zu ändern. “:schweben”Ist eine Pseudoklasse, die es ermöglicht, das Verhalten der HTML-Elemente zu ändern, wenn eine Maus darüber übergeht, wie Elemente wie Links, Schaltflächen, Bilder und vieles mehr.

Die Syntax von :schweben wird unten bereitgestellt.

Syntax

In der obigen bereitgestellten Syntax “,“A”Bezieht sich auf das HTML -Element, in dem das“:schweben" wird angewandt. In CSS können Sie das Schwebeverhalten der HTML -Elemente wie Farbe, Größe und Breite des Elements festlegen.

Schritt 1: Erstellen Sie Div und Taste

In der HTML werden wir zunächst eine DIV erstellen und eine Überschrift mit hinzufügen

und eine Schaltfläche mit einem Tag mit einem Tag. Hier zuweisen wir den Klassennamen der Schaltfläche als "Btn"Und der Schaltflächentext als"Schwebe auf mich”.

Html

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

Gehen Sie nun zum CSS, um den Div und den Knopf nacheinander zu stylen.

Schritt 2: Stiltaste und Div

Zunächst werden wir den erstellten Container mithilfe von "stylen" stylendiv”. Dann setzen wir die Höhe des Div als “als"250px"Und die Hintergrundfarbe als"RGB (199, 173, 192)”. Wir werden auch die Grenzeigenschaft verwenden, um den Rand der Div -Breite als “anzupassen5px", Stil als"solide", Und Farbe als"RGB (40, 2, 55)”.

CSS

Die untergedrehte Ausgabe zeigt an, dass der zusätzliche Stil erfolgreich auf der DIV angewendet wird:

Im nächsten Schritt werden wir die Taste mit CSS stylen.

Jetzt werden wir die Schaltfläche mit “stylen“.Btn”Zu dem Zugriff auf die Schaltfläche, die in HTML erstellt wurde. Danach werden wir den Rand der Taste verbergen, indem wir einstellen “keiner”Als Grenzeigenschaftswert. Danach werden wir die Schriftgröße an anpassen “groß"Und die Polsterung des Knopfes zu"10px”Um Leerzeichen zwischen dem Inhalt der Schaltfläche und dem Rand der Taste zu erstellen. Am Ende setzen wir die Farbe des Textes und des Hintergrunds als "RGB (50, 0, 54)" Und "RGB (193, 54, 135)”:

Der Knopf ist jetzt gestaltet:

Darüber hinaus werden wir uns bewerben “:schweben”Um die Farbe einer Taste auf dem Schwebe zu ändern.

Schritt 3: Schaltfläche Farbe beim Schwebewesen ändern

Jetzt werden wir verwenden “.BTN: Hover”Um die Schaltfläche mit dem Hover Pseudo-Klasse-Element zu verknüpfen. Infolgedessen wird HOVER auf die Taste angewendet. Als nächstes setzen wir die Hintergrundfarbe und Textfarbe der Schaltfläche als "RGB (66, 2, 41)" Und "RGB (119, 255, 0)”. Diese Farben werden auf die Taste angewendet, wenn eine Maus darüber hinausgeht:

In der folgenden Ausgabe können Sie sehen, dass die Farbe der Taste geändert wird, wenn eine Maus darauf schwebt:

Das ist es! Wir haben die Methode erklärt.

Abschluss

Um die Farbe einer Taste auf Schwebe zu ändern, die “:schwebenDas Element der Pseudoklasse wird verwendet. Verknüpfen Sie dazu die Taste mit: Bewegen. In diesem Artikel haben wir die Methode erläutert, um die Farbe der Schaltflächenschaltfläche zu ändern, und ein Beispiel dafür geliefert.