Achtung!

Dieser Artikel enthält CSS-Code und richtet sich an Entwickler. Wir stellen diesen Code als Service zur Verfügung, bieten jedoch keinen Support für Codeanpassungen oder die Entwicklung durch Dritte.

Für zusätzliche Hilfe sehen Sie sich bitte das Tutorial von WPBeginner zum Hinzufügen von benutzerdefiniertem CSS an.

Schließen

CSS zur Personalisierung der Sende-Schaltfläche verwenden

Aktualisiert:
Markdown anzeigen

Einleitung

Möchten Sie CSS verwenden, um die Schaltfläche Senden zu personalisieren? CSS hat ein immenses Potenzial für verschiedene Aspekte Ihrer Website, und in diesem Tutorial geben wir Ihnen praktische Beispiele, wie Sie die Fähigkeiten von CSS nutzen können, um das Erscheinungsbild Ihrer Senden-Schaltfläche zu verändern.

Für dieses Tutorial werden wir uns nicht mit der Formularerstellung befassen. Wenn Sie Hilfe bei der Erstellung Ihres Formulars benötigen, lesen Sie diese informative Anleitung.

Neu bei CSS? Unsere Freunde von WPBeginner bieten eine ausgezeichnete Definition und nützliche Beispiele. Entdecken Sie mehr zu diesem Thema auf deren informativen Glossarseite.

Alle Beispiele in diesem Tutorial geben Ihnen den CSS-Code, um Ihre Schaltfläche für alle Formulare, aber auch für einzelne Formulare zu ändern.

Um zu lernen, wie Sie CSS in Ihre Website integrieren, lesen Sie dieses Tutorial. Wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen, konsultieren Sie dieses Tutorial.

Vollbreite Schaltfläche

In diesem Fall möchten wir die Breite der Senden-Schaltfläche an unsere Formularfelder anpassen. Um dies zu erreichen, wenden wir das folgende CSS an.

Für ein einzelnes Formular

Dieses Beispiel zielt nur auf das Formular mit der ID 23 ab.

button#wpforms-submit-23 {
    width: 100%;
}

Für alle Formulare

Dieses Beispiel zielt auf alle WPForms ab.

button.wpforms-submit {
    width: 100% !important;
}

Gedrückte Schaltflächen-Effekt für ein einzelnes Formular

Mit dem folgenden CSS lassen wir die Schaltfläche beim Klicken nach unten gedrückt aussehen.

Für ein einzelnes Formular

Dieses Beispiel zielt nur auf das Formular mit der ID 23 ab.

button#wpforms-submit-23 {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #b95d52;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button#wpforms-submit-23:hover {
	background-color: #55555e;
}

button#wpforms-submit-23:active {
  background-color: #55555e;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

Für alle Formulare

Dieses Beispiel zielt auf alle WPForms ab.

button.wpforms-submit {
  display: inline-block !important;
  font-size: 24px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  outline: none !important;
  color: #fff !important;
  background-color: #b95d52 !important;
  border: none !important;
  border-radius: 15px !important;
  box-shadow: 0 9px #999 !important;
}

button.wpforms-submit:hover {
	background-color: #55555e !important;
}

button.wpforms-submit:active {
  background-color: #55555e !important;
  box-shadow: 0 5px #666 !important;
  transform: translateY(4px) !important;
}

Dieses CSS lässt die Schaltfläche „Senden“ beim Klicken nach unten gedrückt aussehen

Senden mit 2 Textzeilen

Für dieses Beispiel werden wir eine Schaltfläche mit 2 Textzeilen haben.

Für ein einzelnes Formular

Dieses Beispiel zielt nur auf das Formular mit der ID 23 ab.

button#wpforms-submit-23 {
    max-width: 20%;
    line-height: 1.2em;
    height: auto;
}

Für alle Formulare

Dieses Beispiel zielt auf alle WPForms ab.

button.wpforms-submit {
    max-width: 20% !important;
    line-height: 1.2em !important;
    height: auto !important;
}

Mit diesem CSS können Sie die Schaltfläche „Senden“ über 2 Textzeilen erscheinen lassen

Animation beim Hovern

Für dieses Beispiel bringen wir beim Hovern einen Doppelpfeil für die Schaltfläche mit content: '\00bb'; im CSS ein. Für weitere Informationen zum Finden des richtigen HTML-Codes für Ihr Symbol, sehen Sie bitte die Dokumentation von W3C Schools.

Sie könnten dieses Symbol durch jedes schriftbasierte Symbol ersetzen, wie es in diesem Tutorial zu finden ist.

Für ein einzelnes Formular

Dieses Beispiel zielt nur auf das Formular mit der ID 23 ab.

button#wpforms-submit-23 {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button#wpforms-submit-23:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}

button#wpforms-submit-23:hover {
  padding-right: 25px;
}

button#wpforms-submit-23:hover:after {
  opacity: 1;
  right: 50px;
}

Für alle Formulare

Dieses Beispiel zielt auf alle WPForms ab.

button.wpforms-submit {
  border-radius: 4px !important;
  border: none !important;
  color: #FFFFFF !important;
  text-align: center !important;
  width: 200px !important;
  transition: all 0.5s !important;
  cursor: pointer !important;
  margin: 5px !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  transition: 0.5s !important;
}

button.wpforms-submit:after {
  content: '\00bb' !important;
  position: absolute !important;
  opacity: 0 !important;
  top: 11px !important;
  right: 0 !important;
  transition: 0.5s !important;
}

button.wpforms-submit:hover {
  padding-right: 25px !important;
}

button.wpforms-submit:hover:after {
  opacity: 1 !important;
  right: 50px !important;
}

Dieses CSS gibt Ihnen einen Animationseffekt, wenn Sie mit der Maus über die Schaltfläche fahren

Farbe ändern

Für dieses Beispiel werden wir die Farbe der Schaltfläche ändern. Wir werden in diesem Beispiel auch die Textgröße, die Textfarbe und die Schriftart ändern.

Für ein einzelnes Formular

Dieses Beispiel zielt nur auf das Formular mit der ID 23 ab.

button#wpforms-submit-23 {
    font-family: roboto;
    font-size: 22px;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: unset;
    border: 1px solid transparent;
    background: unset;
    background-color: #b95d52;
}

button#wpforms-submit-23:hover {
    background-color: #ffffff;
    border: 1px solid #b95d52;
    opacity: 1;
    color: #b95d52;
}

Für alle Formulare

Dieses Beispiel zielt auf alle WPForms ab.

button.wpforms-submit {
    font-family: roboto !important;
    font-size: 22px !important;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff !important;
    box-shadow: unset !important;
    border: 1px solid transparent !important;
    background: unset !important;
    background-color: #b95d52 !important;
}

button.wpforms-submit:hover {
    background-color: #ffffff !important;
    border: 1px solid #b95d52 !important;
    opacity: 1 !important;
    color: #b95d52 !important;
}

Diese Beispielschaltfläche hat die Farbe, Hintergrundfarbe, Schriftgröße, Schriftfamilie und Großschreibung des Textes geändert

Box-Shadow-Schaltfläche

Dieses Beispiel zeigt Ihnen, wie Sie mit dem folgenden CSS einen Box-Shadow auf die Schaltfläche setzen.

Für ein einzelnes Formular

Dieses Beispiel zielt nur auf das Formular mit der ID 23 ab.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Alternativ könnten Sie den Box-Shadow nur beim Hovern mit diesem CSS für das Formular bereitstellen.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

button#wpforms-submit-23:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

Für alle Formulare

Dieses Beispiel zielt auf alle WPForms ab.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Und wieder, wie im obigen Beispiel, könnten Sie den Box-Shadow nur beim Hovern setzen.

button.wpforms-submit {
    background-color: #b95d52 !important;
    border: none !important;
    color: white !important;
    padding: 10px 30px !important;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    font-size: 16px !important;
    margin: 4px 2px !important;
    cursor: pointer !important;
    -webkit-transition-duration: 0.4s !important;
    transition-duration: 0.4s !important;
}

button.wpforms-submit:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) !important;
}

In diesem CSS-Beispiel zeigen wir einen Schatten (box-shadow) auf der Schaltfläche, entweder jederzeit oder nur beim Überfliegen, abhängig von dem von Ihnen verwendeten Ausschnitt

Und dies sind nur einige Beispiele dafür, wie einfach es ist, die Senden-Schaltfläche mit CSS zu personalisieren. Möchten Sie auch Ihre Formularbeschriftungen personalisieren? Schauen Sie sich unser Tutorial an Wie Sie Bilder vor oder nach Ihren Formularbeschriftungen hinzufügen.

FAQ

F: Kann ich dieses CSS auch für Seitenumbruch-Schaltflächen verwenden?

A: Absolut, um eines dieser Beispiele mit Standard-Schaltflächen zu verwenden, wenn Sie die Page Breakbutton.wpforms-page-button. verwenden.

Alternativ, wenn Sie nur ein einzelnes Formular ansprechen möchten, würden Sie stattdessen die CSS-Klasse form#wpforms-form-3221 button.wpforms-page-button verwenden und nur daran denken, die Formular-ID zu aktualisieren, um Ihre eigene Formular-ID anzupassen.

Zum Beispiel, Animation beim Überfliegen, wie oben für die Schaltfläche Senden gezeigt, werden wir dasselbe für die Seitenumbruchschaltflächen tun.

Dieses CSS ist für ein bestimmtes Formular, die Formular-ID 3221. Wenn Sie dies auf ein einzelnes Formular beschränken möchten, müssen Sie die 3221 an Ihre eigene ID anpassen. Hilfe zum Auffinden Ihrer Formular-ID finden Sie in unserer nützlichen Dokumentation.

form#wpforms-form-3221 button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

Dieses CSS wäre für alle Formulare.

button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

Hier ist ein Beispiel für die Änderung der Seitenumbruchschaltflächen

Getaggt:
Immer noch festgefahren? Wie können wir helfen?
Zuletzt aktualisiert am 29. Aug. 2023