HTML liefert verschiedene Elemente; Einer von ihnen ist der "Taste”, Mit dem eine spezifische Aktion auf der Webseite durchgeführt wird. Mit CSS können Sie die Schaltfläche auf unterschiedliche Weise stylen, z. Dazu können verschiedene CSS -Eigenschaften verwendet werden, um die Taste gemäß den Anforderungen zu stylen.

In diesem Handbuch werden Ihnen das Verfahren zur Änderung der Farbe der Schaltfläche beigebracht. Lass uns anfangen!

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

Sie können die Farbe der Schaltfläche mit der "ändern" ändernHintergrundfarbeEigenschaft und stellen Sie die Farbe der Schaltfläche gemäß Ihren Vorlieben ein. Grundsätzlich die “HintergrundfarbeDie Eigenschaft wird verwendet, um die Hintergrundfarbe der HTML -Elemente hinzuzufügen.

Syntax

Die Syntax der Hintergrundfarbe ist wie folgt:

Hintergrundfarbe: Wert

An der Stelle des Hintergrundfarbe können Sie die Farbe festlegen, die Sie hinter den HTML-Elementen anzeigen möchten.

Lassen Sie uns nun zum praktischen Beispiel wechseln, in dem wir die Knopffarbe ändern werden.

Beispiel

Erfahren Sie zuerst.

Schritt 1: DIV & Button erstellen

In HTML erstellen wir einen DIV und zuweisen den Klassennamen als “div”. Innerhalb des Tags werden wir mit dem eine Überschrift hinzufügen

Tag und eine Schaltfläche mit dem Tag mit dem Klassennamen als "Btn”. Der Text, der auf der Schaltfläche angezeigt wird, lautet “Farbe”.

Html

Ändern Sie die Tastefarbe in CSS

Farbe

Es ist ersichtlich, dass der Div und eine Schaltfläche erstellt werden:

Jetzt werden wir zum nächsten Schritt übergehen, um das erstellte Div mit CSS zu stylen.

Schritt 2: Stil Div

Hier, benutze “.div"Zu dem erstellten Container zugreifen und seine Höhe als" festlegen "festlegen"200px”. Dann stylen Sie die DIV mit dem “Grenze”Eigentum, um die Grenze rund um die Div zu setzen. Die Breite der Grenze wird als "festgelegt"4px", Sein Stil als"Rille", Und Farbe als"RGB (1, 34, 77)”. Wir werden die Form des Randes mit der “setzen“Grenzradius”Eigenschaft und setzen Sie ihren Wert als"25px”. Danach benutzen Sie die “Hintergrundfarbe”Eigenschaft, um die Hintergrundfarbe des DIV festzulegen und den Wert der Farbe als“ zuzuweisen “RGB (210, 243, 241)”.

CSS

.div
Höhe: 200px;
Grenze: 4px Groove RGB (1, 34, 77);
Border-Radius: 25px;
Hintergrundfarbe: RGB (210, 243, 241);

Infolgedessen wird der erstellte Container gestylt:

Übergehen wir zum letzten Schritt, in dem wir die Taste mit CSS färben.

Schritt 3: Schaltflächenfarbe ändern

Nachdem wir das DIV in CSS gestylt haben, werden wir verwenden “.Btn”Zu dem Zugriff auf die Schaltfläche, die in HTML erstellt wurde. Stellen Sie dann den Wert der Grenzeigenschaft als "als" als "festkeiner”Um den Standard -Randstil zu entfernen. Geben Sie den Wert der Grenze-Radius-Eigentum an als “an15px”Um die Form der Taste einzustellen

Stylen Sie den Text der Schaltfläche mit der Eigenschaft mit Schriftgröße und setzen Sie ihren Wert als "xx-large”. Danach werden wir Polster als "verwenden"10pxUm Platz zwischen dem hinzugefügten Text und dem Rand der Schaltfläche zu schaffen.

Verwenden Sie am Ende die Farbeigenschaft und setzen Sie ihren Wert als "RGB (255, 251, 7)”Um den Text und die Eigenschaft von Hintergrundfarben als" als "als" zu färbenRGB (43, 87, 84)”So setzen Sie die Farbe der Schaltfläche:

.btn
Grenze: Keine;
Border-Radius: 15px;
Schriftgröße: xx-large;
Polsterung: 10px;
Farbe: RGB (255, 251, 7);
Hintergrundfarbe: RGB (43, 87, 84);

In der angegebenen Ausgabe wurde angegeben, dass die Farbe der Taste erfolgreich geändert wird:

Wir haben die Methode erklärt, um die Farbe der Taste in CSS zu ändern.

Abschluss

In CSS, die “HintergrundfarbeEigenschaft wird verwendet, um die Farbe der Taste einzustellen. Mit dieser Weise können Sie die Farbe nach Ihrer Wahl festlegen und einen Knopf elegant entwerfen. Sie können auch verschiedene Eigenschaften verwenden, um das Aussehen der Taste mit CSS zu verbessern. In diesem Handbuch haben wir die Methode zur Änderung der Schaltflächenfarbe in CSS erläutert und ein Beispiel für Ihr besseres Verständnis gegeben.