In diesem wikiHow zeigen wir dir, wie du die Farbe einer Schaltfläche in HTML änderst. Sie können die Farbe einer Schaltfläche mit reinem HTML oder mit CSS (Cascading Style Sheets) in HTML5 ändern.
Schritte
Methode 1 von 2: Verwenden von HTML
Schritt 1. Geben Sie <button in Ihren HTML-Text ein
Dies ist der Anfang des Button-Tags Ihres HTML-Codes. Der Textkörper Ihres HTML ist der Bereich zwischen und Tags. Im Body werden die sichtbaren Elemente einer Webseite mit HTML platziert.
Schritt 2. Geben Sie style= nach "button" in Ihr Button-Tag ein
Dies zeigt an, dass das Button-Tag Stilelemente enthält. Alle Stilelemente werden nach dem "=" Zeichen platziert.
Schritt 3. Fügen Sie nach dem Gleichheitszeichen (=) ein Anführungszeichen (") ein
Alle Stilelemente in Ihrem HTML-Button-Tag sollten in Anführungszeichen gesetzt werden.
Schritt 4. Geben Sie die Hintergrundfarbe ein:
in den Anführungszeichen nach "style=".
Dieses Element wird verwendet, um die Hintergrundfarbe der Schaltfläche zu ändern.
Schritt 5. Geben Sie nach "background-color" einen Farbnamen oder einen Hexadezimalcode ein:
".
Sie können den Namen einer Farbe (z. B. Blau) oder einer hexadezimalen Farbe eingeben.
- Um einen Hexadezimalcode zu finden, rufen Sie in einem Webbrowser https://www.google.com/search?q=color+picker auf. Verwenden Sie den Schieberegler unten, um eine Farbe auszuwählen. Verwenden Sie den Kreis im Fenster, um einen Farbton auszuwählen. Markieren und kopieren Sie den 6-stelligen Code (einschließlich des Rautenzeichens) in der Seitenleiste links und fügen Sie ihn in Ihr Button-Tag ein.
- Sie können auch "transparent" als Hintergrundfarbe verwenden
Schritt 6. Geben Sie nach der Hintergrundfarbe ein Semikolon (;) ein
Verwenden Sie ein Semikolon, um die verschiedenen Stilelemente im HTML-Schaltflächen-Tag zu trennen.
Schritt 7. Geben Sie border-color ein:
in den Anführungszeichen nach "style=".
Dieses Element wird verwendet, um die Farbe des Rahmens um die Schaltfläche zu bestimmen. Sie können Stilelemente in beliebiger Reihenfolge in die Anführungszeichen nach "style=" setzen. Jedes Element muss durch ein Semikolon (;) getrennt werden.
Schritt 8. Geben Sie einen Farbnamen oder einen Hexadezimalcode für die Rahmenfarbe ein
Der Farbname oder Hexadezimalcode für den Rand steht nach dem "border-color:"-Element.
Wenn Sie den Rahmen entfernen möchten, geben Sie border:none anstelle des Elements "border-color:" ein
Schritt 9. Geben Sie nach der Rahmenfarbe ein Semikolon (;) ein
Verwenden Sie ein Semikolon, um die verschiedenen Stilelemente im HTML-Schaltflächen-Tag zu trennen.
Schritt 10. Farbe eingeben:
in den Anführungszeichen nach "style=".
Dieses Element wird verwendet, um die Textfarbe in der Schaltfläche zu ändern. Sie können Stilelemente in beliebiger Reihenfolge in die Anführungszeichen nach "style=" setzen. Jedes Element muss durch ein Semikolon (;) getrennt werden.
Schritt 11. Geben Sie den Namen eines Farb- oder Hexadezimalcodes ein
Dies steht nach "color:" im style-Element. Dies bestimmt die Farbe des Textes in der Schaltfläche.
Schritt 12. Geben Sie nach all Ihren Stilelementen ein Anführungszeichen (") ein
Alle Ihre Stilelemente sollten in Anführungszeichen nach "style=" im Button-Tag stehen. Wenn Sie alle Stilelemente hinzugefügt haben, geben Sie am Ende ein Anführungszeichen (") ein, um die Stilelemente zu schließen.
Schritt 13. Geben Sie nach den Stilelementen > ein
Dadurch wird das öffnende Button-Tag geschlossen.
Schritt 14. Geben Sie Ihren Schaltflächentext nach dem Schaltflächen-Tag ein
Nachdem Sie das öffnende Tag für Ihre Schaltfläche erstellt haben, geben Sie den Text ein, der in die Schaltfläche nach dem Tag eingefügt werden soll.
Schritt 15. Geben Sie nach Ihrem Schaltflächentext ein
Dies ist das schließende Tag für Ihre Schaltfläche. Ihre Schaltfläche ist fertig. Ihr HTML-Code sollte ungefähr so aussehen.
Methode 2 von 2: CSS verwenden
Schritt 1. Geben Sie oben in Ihrem HTML-Dokument ein
Dadurch wird ein Kopf für Ihr HTML-Dokument erstellt. Im Kopf Ihres Dokuments werden Informationen platziert, die auf Ihrer Webseite nicht sichtbar sind. Dazu gehören Metadaten, der Titel der Seite und Stylesheets.
Schritt 2. Geben Sie ein
Dieses Tag fügt einen Ort auf Ihrer Webseite für Cascading Style Sheets (CSS) hinzu. Dieser Abschnitt steht im Kopf Ihres HTML-Dokuments.
Einige HTML-Dokumente verwenden ein externes Stylesheet. In diesem Fall müssen Sie den Speicherort der externen CSS-Datei ermitteln und die Schaltflächen-Stylesheets in diesem Dokument bearbeiten
Schritt 3. Geben Sie.button { in eine separate Zeile nach dem Stilabschnitt ein
Dies öffnet das Stylesheet für eine Schaltfläche, für die Sie einen Stil erstellen.
Sie können die Farbe der Schaltfläche auch ändern, wenn Sie den Mauszeiger über die Schaltfläche bewegen, indem Sie ein separates Stylesheet mit.button:hover { als öffnendem Tag erstellen
Schritt 4. Geben Sie die Hintergrundfarbe ein:
. Dies erfolgt in einer separaten Zeile im Schaltflächen-Stylesheet. Dieses Element steuert die Hintergrundfarbe der Schaltfläche.
Schritt 5. Geben Sie den Namen eines Farb- oder Hexadezimalcodes gefolgt von einem Semikolon (;) ein
Geben Sie dies nach dem "background-color:"-Element im Schaltflächen-Stylesheet ein. Dies gibt die Hintergrundfarbe der Schaltfläche an.
- Um einen Hexadezimalcode zu finden, rufen Sie in einem Webbrowser https://www.google.com/search?q=color+picker auf. Verwenden Sie den Schieberegler unten, um eine Farbe auszuwählen. Verwenden Sie den Kreis im Fenster, um einen Farbton auszuwählen. Markieren und kopieren Sie den 6-stelligen Code (mit dem Rautenzeichen) in der Seitenleiste nach links.
- Sie können auch "transparent" als Hintergrundfarbe eingeben, um den Hintergrund unsichtbar zu machen.
Schritt 6. Geben Sie border-color ein:
. Das Element steuert die Farbe des Rahmens um die Schaltfläche. Geben Sie dies in einer separaten Zeile im Stylesheet für die Schaltfläche ein.
Schritt 7. Geben Sie den Namen eines Farb- oder Hexadezimalcodes gefolgt von einem Semikolon (;) ein
Dies bestimmt die Farbe des Rahmens um die Schaltfläche. Dies steht nach dem "border-color:"-Element im Button-Stylesheet.
Wenn Sie den Rahmen entfernen möchten, geben Sie border:none ein; anstelle des Elements "border-color:colorname"
Schritt 8. Farbe eingeben:
. Geben Sie dies in einer separaten Zeile im Stylesheet ein. Dieses Element steuert die Farbe des Textes in der Schaltfläche.
Schritt 9. Geben Sie den Namen eines Farb- oder Hexadezimalcodes gefolgt von einem Semikolon (;) ein
Dies bestimmt die Farbe des Textes innerhalb der Schaltfläche. Dies steht nach dem "color:"-Element im Schaltflächen-Stylesheet.
Schritt 10. Geben Sie } in eine separate Zeile ein
Dadurch wird das Stylesheet für Ihre Schaltfläche geschlossen. Sie können mehrere Schaltflächen-Stylesheets erstellen, solange Sie jeder Schaltfläche einen eindeutigen Namen geben.
Schritt 11. Geben Sie ein, nachdem Sie Ihr CSS abgeschlossen haben
Nachdem Sie alle Ihre Stylesheets erstellt haben, geben Sie "" in eine separate Zeile ein, um den Stilabschnitt Ihres HTML-Dokuments zu schließen.
Schritt 12. Geben Sie ein
Dies schließt den Kopf Ihres HTML-Dokuments.
Schritt 13. Geben Sie den Schaltflächentext in den Textkörper Ihres HTML-Dokuments ein
Dadurch wird eine Schaltfläche zum sichtbaren Teil Ihres HTML-Codes hinzugefügt, wobei die Stylesheets verwendet werden, die im Abschnitt Style Ihres HTML-Dokuments angegeben sind. Ersetzen Sie "url" durch die Webadresse, auf die die Schaltfläche verweist. Der Textkörper Ihres HTML-Dokuments steht zwischen den und -Tags Ihres HTML-Dokuments. Ihr HTML-Code sollte ungefähr so aussehen:
Heim