### [So ändern Sie die Farbe der Sende-Schaltfläche](https://wpforms.com/developers/how-to-change-the-submit-button-color/)
**Veröffentlicht:** 10. Oktober 2019
**Autor:** Umair Majeed
**Auszug:** Diese Anleitung zeigt Ihnen, wie Sie mit CSS die Farbe der Sende-Schaltfläche auf Ihren WPForms ändern können.
**Inhalt:**
Möchten Sie die Farbe der Sende-Schaltfläche Ihres Formulars an das Branding Ihrer Website anpassen? Während WPForms 1.8.1+ eine integrierte Farbanpassung über den Block-Editor bietet, können Sie dies auch mit benutzerdefiniertem CSS für eine präzisere Kontrolle erreichen.
Diese Anleitung zeigt Ihnen, wie Sie die Farbe Ihrer Sende-Schaltfläche mit CSS ändern.
Mit der Veröffentlichung von WPForms 1.8.1 können Sie jetzt ganz einfach die Farbe der Sende-Schaltfläche ohne CSS ändern, indem Sie das Formular einfach über einen Block-Editor zu Ihrer Seite hinzufügen. Mit dieser Formular-Styling-Funktion können Sie Ihre Formulare gestalten, ohne CSS schreiben zu müssen. Um mehr darüber zu erfahren, [lesen Sie bitte diese hilfreiche Dokumentation](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/ "So gestalten Sie WPForms mit dem Block-Editor").
Sie können dies jedoch auch mit benutzerdefiniertem CSS erreichen, und für diese Anleitung werden wir diese Methode verwenden, um die Farbe der **Sende**-Schaltfläche zu ändern.
## Einrichten des Formulars
Öffnen Sie zunächst den Formular-Builder, indem Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten. Fügen Sie Ihre gewünschten Formularfelder nach Bedarf hinzu.
Für Hilfe bei der Erstellung eines Formulars lesen Sie bitte unsere vollständige Anleitung [So erstellen Sie Ihr erstes Formular](https://wpforms.com/docs/creating-first-form/).
## Hinzufügen des CSS-Codes
Der folgende CSS-Schnipsel ändert die Farbe Ihrer Sende-Schaltfläche:
Wenn Sie Hilfe benötigen, wie und wo Sie CSS zu Ihrer Website hinzufügen können, lesen Sie unsere Anleitung [Hinzufügen von benutzerdefinierten CSS-Stilen](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Das obige CSS ändert den Hintergrund der Sende-Schaltfläche zu Blau ([\#066AAB](https://www.htmlcsscolor.com/hex/066aab)) mit weißem Text auf allen WPForms **Sende**-Schaltflächen auf Ihrer Website.
Die Farben in diesem CSS werden mit Hex-Codes definiert, über die Sie [mehr in dieser Dokumentation lesen können](http://www.htmlcsscolor.com/)
Hinweis: Für zusätzliche Stiländerungen an der Sende-Schaltfläche, wie z. B. Hover-Stile, lesen Sie bitte [unsere Anleitung zur Formatierung der Sende-Schaltfläche](https://wpforms.com/docs/how-to-customize-the-submit-button/).
## Anpassen des Codes
Um andere Farben zu verwenden, ersetzen Sie die Hex-Codes im Code:
In **Zeile 7** ersetzen Sie `#066AAB` durch Ihre gewünschte Schaltflächenfarbe.
In **Zeile 8** ersetzen Sie `#`066AAB`` durch dieselbe Farbe, um den Rand anzupassen.
In **Zeile 14** ersetzen Sie `#04446E` durch Ihre gewünschte Hover-Farbe (typischerweise ein dunklerer Farbton Ihrer Schaltflächenfarbe).
Um beispielsweise eine rote Schaltfläche zu erstellen, könnten Sie verwenden:
```
background-color: #ff0000 !important;
border-color: #ff0000 !important;
```
## Häufig gestellte Fragen
#### F: Warum funktioniert dieses CSS bei mir nicht?
**A:** Wenn Sie Ihre Änderungen nicht sehen, leeren Sie zuerst den Cache Ihres Browsers. Wenn es immer noch nicht funktioniert, überschreibt Ihr Theme möglicherweise die Stile. Versuchen Sie, `!important` zu Ihren CSS-Regeln hinzuzufügen, wie in unserem Beispiel gezeigt. Weitere Hilfe finden Sie in unserer [CSS-Fehlerbehebungsanleitung](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/).
#### F: Funktioniert dies auch für die Schaltflächen „Weiter“ und „Zurück“?
**A:** Wenn Sie ein **Seitenumbruch**-Feld in Ihrem Formular verwenden und **Weiter**- und **Zurück**-Schaltflächen zur Navigation verwenden, verwenden wir etwas CSS, das all diese Schaltflächen mit exakt demselben Stil versieht. Kopieren Sie einfach dieses CSS auf Ihre Website.
```
.wpforms-form button[type=submit], button.wpforms-page-button {
background-color: #024488 !important;
border-color: #024488 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
}
.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
background-color: #022B57 !important;
}
```
#### F: Kann ich nur eines meiner Formulare ansprechen?
**A:** Wenn Sie nur ein Formular ändern möchten, würden Sie einfach die Formular-ID in Ihrem CSS ansprechen. In diesem Beispiel werden wir die Formular-ID **999** für die **Sende**-Schaltfläche sowie die **Weiter**- und **Zurück**-Schaltflächen aus dem **Seitenumbruch**-Feld ansprechen.
Sie müssen die **999** aktualisieren, um Ihre eigene Formular-ID anzugeben.
Wenn Sie nicht sicher sind, wo Sie Ihre Formular-ID finden, lesen Sie unsere Anleitung [Feld- und Formular-ID finden](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
```
button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
background-color: #024488;
border-color: #024488;
color: #fff;
transition: background 0.3s ease-in-out;
}
button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
background-color: #022B57;
}
```
Das ist alles! Sie haben jetzt die Farbe Ihrer Sende-Schaltfläche geändert. Möchten Sie als Nächstes CSS verwenden, um die **Sende**-Schaltfläche auf andere Weise anzupassen? Sehen Sie sich unsere Anleitung [CSS zur Personalisierung der Sende-Schaltfläche verwenden](https://wpforms.com/developers/using-css-to-personalize-the-submit-button/ "CSS zur Personalisierung der Sende-Schaltfläche verwenden").
**Kategorien:** Styling
**Tags:** CSS
---