Die Farbe einer Schaltfläche in HTML ändern

PDF download PDF herunterladen
unter Mitarbeit von wikiHow Staff

PDF download PDF herunterladen

In diesem Artikel lernst du, wie du die Farbe einer Schaltfläche in HTML verändern kannst. Das kannst du mit einfachem HTML machen oder in dem du in HTML5 CSS (Cascading Style Sheets) anwendest.

Methode 1
Methode 1 von 2:

HTML verwenden

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/cd\/11147764-1.jpg\/v4-460px-11147764-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/cd\/11147764-1.jpg\/v4-728px-11147764-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das ist der Anfang des Tags für Schaltflächen (oder Buttons) in deinem HTML-Code. Der Hauptteil deines HTML ist der Bereich zwischen den Tags <body> und </body>. In den Hauptteil werden unter Anwendung von HTML die sichtbaren Elemente der Webseite gesetzt.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fe\/11147764-2.jpg\/v4-460px-11147764-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fe\/11147764-2.jpg\/v4-728px-11147764-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das weist darauf hin, dass es Gestaltungselemente im Tag für die Schaltfläche gibt. Alle Gestaltungselemente setzt man hinter das "="-Zeichen.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/11147764-3.jpg\/v4-460px-11147764-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/11147764-3.jpg\/v4-728px-11147764-3.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Alle Gestaltungselemente in deinem HTML-Tag für eine Schaltfläche sollten in Anführungszeichen gesetzt werden.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8f\/11147764-4.jpg\/v4-460px-11147764-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8f\/11147764-4.jpg\/v4-728px-11147764-4.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dieses Element wird verwendet, um die Hintergrundfarbe der Schaltfläche zu verändern.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c5\/11147764-5.jpg\/v4-460px-11147764-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c5\/11147764-5.jpg\/v4-728px-11147764-5.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    " ein. Du kannst den Namen einer Farbe auf Englisch eingeben (z.B. blue) oder einen Hexadezimalcode.
    • Gehe, um einen Hexadezimalcode zu finden, in einem Webbrowser auf https://www.google.com/search?q=color+picker . Verwende den Schieberegler, um eine Farbe auszuwählen. Verwende den Kreis im Fenster, um einen Farbton auszusuchen. Markiere und kopiere den sechsstelligen Code (inklusive des Rautezeichens) in der Seitenleiste links und setze ihn in den Tag für die Schaltfläche ein.
    • Du kannst auch "transparent" als Hintergrundfarbe verwenden. [1]
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/52\/11147764-6.jpg\/v4-460px-11147764-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/52\/11147764-6.jpg\/v4-728px-11147764-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Verwende einen Strichpunkt, um die verschiedenen Gestaltungselemente innerhalb des HTML-Tags für die Schaltfläche zu trennen.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/83\/11147764-8.jpg\/v4-460px-11147764-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/83\/11147764-8.jpg\/v4-728px-11147764-8.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dieses Element wird verwendet, um die Rahmenfarbe rund um die Schaltfläche zu bestimmen. Du kannst die Gestaltungselemente in jede beliebige Reihenfolge setzen, aber innerhalb der Anführungszeichen hinter "style=". Die einzelnen Elemente müssen durch einen Strichpunkt (;) voneinander getrennt werden.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/83\/11147764-8.jpg\/v4-460px-11147764-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/83\/11147764-8.jpg\/v4-728px-11147764-8.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":551,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Der Name der Farbe oder der Hexadezimalcode stehen nach dem Element "border-color:".
    • Wenn du den Rahmen entfernen möchtest, tippe border:none anstelle des Elements "border-color:" ein.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5b\/11147764-9.jpg\/v4-460px-11147764-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5b\/11147764-9.jpg\/v4-728px-11147764-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Verwende einen Strichpunkt, um die unterschiedlichen Gestaltungselemente im HTML-Tag für die Schaltfläche voneinander zu trennen.
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d4\/11147764-10.jpg\/v4-460px-11147764-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d4\/11147764-10.jpg\/v4-728px-11147764-10.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ein. Dieses Element wird verwendet, um die Textfarbe in der Schaltfläche zu ändern. Du kannst Gestaltungselemente in jeder beliebigen Reihenfolge in die Anführungszeichen hinter "style=" setzen. Die einzelnen Elemente müssen durch einen Strichpunkt (;) voneinander getrennt werden.
  11. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/11147764-11.jpg\/v4-460px-11147764-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/11147764-11.jpg\/v4-728px-11147764-11.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Diese stehen in dem Gestaltungselement hinter "color:". Dadurch wird die Farbe des Textes in der Schaltfläche bestimmt.
  12. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/97\/11147764-12.jpg\/v4-460px-11147764-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/97\/11147764-12.jpg\/v4-728px-11147764-12.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Alle Gestaltungselemente sollten innerhalb der Anführungszeichen hinter "style=" im Tag für die Schaltfläche stehen. Wenn du fertig damit bist, alle Gestaltungselemente einzufügen, tippe ein Anführungszeichen (") ans Ende, um die Gestaltungselement abzuschließen.
  13. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/79\/11147764-13.jpg\/v4-460px-11147764-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/11147764-13.jpg\/v4-728px-11147764-13.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dadurch wird der öffnende Tag für die Schaltfläche geschlossen.
  14. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/46\/11147764-14.jpg\/v4-460px-11147764-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/46\/11147764-14.jpg\/v4-728px-11147764-14.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Nachdem du den eröffnenden Tag für deine Schaltfläche abgeschlossen hast, gib hinter dem Tag den Text ein, der in der Schaltfläche stehen soll.
  15. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ad\/11147764-15.jpg\/v4-460px-11147764-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ad\/11147764-15.jpg\/v4-728px-11147764-15.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Deine Schaltfläche ist jetzt fertig. Der HTML-Text sollte ungefähr so aussehen: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 button 
 style 
 = 
 "background-color:red; border-color:blue; color:white" 
 > 
Text der Schaltfläche </ 
 button 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Werbeanzeige
Methode 2
Methode 2 von 2:

CSS verwenden

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/21\/11147764-16.jpg\/v4-460px-11147764-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/21\/11147764-16.jpg\/v4-728px-11147764-16.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Der Seitenkopf (oder head ) deiner Datei ist die Stelle, an die man Informationen setzt, die auf der Webseite selber nicht zu sehen sein werden. Dazu gehören Metadaten, der Seitentitel und Stilentwürfe.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ac\/11147764-17.jpg\/v4-460px-11147764-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ac\/11147764-17.jpg\/v4-728px-11147764-17.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dieser Tag fügt deiner Webseite eine Stelle für CSS ("cascading style sheets") hinzu. Dieser Abschnitt kommt in den Seitenkopf deiner HTML-DAtei.
    • Bei manchen HTML-Dateien wird ein externer Stilentwurf ( style sheet ) eingesetzt. In dem Fall musst du die Speicherstelle der externen CSS-Datei finden und den Stilentwurf für die Schaltfläche in diesem Dokument bearbeiten.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/11147764-18.jpg\/v4-460px-11147764-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/11147764-18.jpg\/v4-728px-11147764-18.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dadurch wird ein Stilentwurf ( style sheet ) für eine Schaltfläche geöffnet, für die du die Gestaltung entwirfst. [2]
    • Du kannst auch einstellen, dass die Farbe der Schaltfläche sich ändert, wenn man den Mauszeiger über sie bewegt, indem du einen gesonderten Stilentwurf mit dem Element .button:hover { als eröffnenden Tag erstellst.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dd\/11147764-19.jpg\/v4-460px-11147764-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/11147764-19.jpg\/v4-728px-11147764-19.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    . Das kommt in eine eigene Zeile im Stilentwurf für die Schaltfläche. Mit diesem Element wird die Hintergrundfarbe der Schaltfläche eingerichtet.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d8\/11147764-20.jpg\/v4-460px-11147764-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d8\/11147764-20.jpg\/v4-728px-11147764-20.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Gib das nach dem Element "background-color:" in dem Stilentwurf für die Schaltfläche ein. Damit wird die Hintergrundfarbe des Schaltfläche festgelegt.
    • Gehe, um einen Hexadezimalcode zu finden, in einem Webbrowser auf https://www.google.com/search?q=color+picker . Verwende den Schieberegler in dem Fenster, um einen Farbton auszusuchen. Markiere und kopiere den sechsstelligen Code (mit dem Rautezeichen) in der Seitenleiste links.
    • Du kannst auch "transparent" als Hintergrundfarbe eingeben, um den Hintergrund unsichtbar zu machen.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1d\/11147764-21.jpg\/v4-460px-11147764-21.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1d\/11147764-21.jpg\/v4-728px-11147764-21.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    . Dieses Element legt die Rahmenfarbe rund um die Schaltfläche fest. Gib es auf einer eigenen Zeile innerhalb des Stilentwurfs für die Schaltfläche ein.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ac\/11147764-22.jpg\/v4-460px-11147764-22.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ac\/11147764-22.jpg\/v4-728px-11147764-22.jpg","smallWidth":460,"smallHeight":348,"bigWidth":728,"bigHeight":550,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dadurch wird die Rahmenfarbe rund um die Schaltfläche festgelegt. Es steht nach dem Element "border-color:" im Stilentwurf für die Schaltfläche.
    • Wenn du den Rahmen entfernen möchtest, gib border:none; anstelle des Elements "border-color:colorname" ein.
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a1\/11147764-23.jpg\/v4-460px-11147764-23.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a1\/11147764-23.jpg\/v4-728px-11147764-23.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    . Gib das in einer eigenen Zeile im Stilentwurf ein. Dieses Element bestimmt die Farbe des Textes in der Schaltfläche.
  9. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/11147764-24.jpg\/v4-460px-11147764-24.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/11147764-24.jpg\/v4-728px-11147764-24.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das legt die Farbe des Textes in der Schaltfläche fest. Es steht nach dem Element "color:" im Stilentwurf für die Schaltfläche.
  10. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/09\/11147764-25.jpg\/v4-460px-11147764-25.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/09\/11147764-25.jpg\/v4-728px-11147764-25.jpg","smallWidth":460,"smallHeight":347,"bigWidth":728,"bigHeight":549,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das schließt den Stilentwurf für die Schaltfläche. Du kannst mehrere Stilentwürfe für Schaltflächen erstellen, sofern du jeder Schaltfläche einen eigenen Namen gibst.
  11. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f7\/11147764-26.jpg\/v4-460px-11147764-26.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f7\/11147764-26.jpg\/v4-728px-11147764-26.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Nachdem du alle Stilentwürfe fertig geschrieben hast, gib in einer eigenen Zeile "</style>" ein, um den Bereich für die Gestaltung deiner HTML-Datei abzuschließen.
  12. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/11147764-27.jpg\/v4-460px-11147764-27.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/11147764-27.jpg\/v4-728px-11147764-27.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das schließt den Seitenkopf deiner HTML-Datei.
  13. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/8b\/11147764-28.jpg\/v4-460px-11147764-28.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/8b\/11147764-28.jpg\/v4-728px-11147764-28.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":544,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dadurch wird eine Schaltfläche in den sichtbaren Teil deines HTML eingefügt, für den die Stilentwürfe im entsprechenden Bereich deines HTML-Dokuments angewandt werden. Ersetze "url" durch die Webadresse, zu der die Schaltfläche verlinkt. Der Hauptteil der HTML-Datei gehört zwischen die Tags <body> und </body> in der HTML-Datei. Dein HTML-Code sollte in etwa so aussehen: 
     <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 > 
.button {
  background-color:blue;
  border-color:red;
  color:white;
} < 
 body 
 > 
 < 
 a 
 href 
 = 
 "https://www.wikihow.com" 
 class 
 = 
 "button" 
 > 
Home </ 
 a 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    Werbeanzeige

Verwandte wikiHows

Kommentare in HTML Code einfügen
Ein Hintergrund Bild in HTML einfügen
HTM Dateien öffnen
Einen E mail Link in HTML erstellen
Eine einfache Webseite mit HTML gestalten
HTML Dateien bearbeiten
Bilder mit HTML einfügen
Text in HTML blinken lassen
Eine Webseite mit einfachem HTML hacken
Ein Dropdown Menü mit HTML und CSS erstellen
Text in HTML zentrieren
Einen Download Knopf auf einer Webseite erstellen
Mit HTML innerhalb von einer Seite verlinken
In HTML eine Linie einfügen
Werbeanzeige

Referenzen

  1. ↑ https://www.randombio.com/linuxsetup94.html
  2. ↑ https://help.surveygizmo.com/help/change-color-of-next-submit-and-progress-bars

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 18.895 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige