Verwendung von CSS zur Personalisierung der Schaltfläche "Senden

Aktualisiert:

Einführung

Möchten Sie CSS nutzen, um den Submit-Button zu personalisieren? CSS bietet ein immenses Potenzial für verschiedene Aspekte Ihrer Website. In diesem Tutorial zeigen wir Ihnen praktische Beispiele, wie Sie die Möglichkeiten von CSS nutzen können, um das Erscheinungsbild Ihrer Submit-Schaltfläche zu verändern.

In diesem Tutorial werden wir uns nicht mit der Formularerstellung befassen. Wenn Sie eine Anleitung zur Erstellung Ihres Formulars benötigen, lesen Sie diesen informativen Leitfaden.

Neu in CSS? Unsere Freunde von WPBeginner bieten eine hervorragende Definition und nützliche Beispiele. Entdecken Sie mehr zu diesem Thema auf ihrer informativen Glossar-Seite.

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

Wie Sie CSS in Ihre Website einbinden können, erfahren Sie in diesem Tutorial. Wenn Sie eine Anleitung zum Finden Ihrer Formular-ID benötigen, lesen Sie dieses Tutorial.

Taste mit voller Breite

In diesem Fall wollen wir die Breite der Schaltfläche " Submit" an unsere Formularfelder anpassen. Um dies zu erreichen, wenden wir das folgende CSS an.

Für einzelne Formulare

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

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

Für alle Formen

Dieses Beispiel zielt auf alle WPForms ab.

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

Effekt der gedrückten Taste für ein einzelnes Formular

Mit dem folgenden CSS wird die Schaltfläche nach unten gedrückt aussehen, wenn sie angeklickt wird.

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 Formen

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 "Submit" nach unten gedrückt aussehen, wenn sie angeklickt wird

Mit 2 Zeilen Text einreichen

In diesem Beispiel werden wir eine Schaltfläche mit 2 Textzeilen verwenden.

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 Formen

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 den Submit-Button über 2 Textzeilen erscheinen lassen

Animation beim Schweben

In diesem Beispiel fügen wir einen Doppelpfeil beim Hovern für die Schaltfläche mit dem content: '\00bb'; im CSS. Weitere Informationen zum Finden des richtigen HTML-Codes für Ihr Symbol finden Sie hier, siehe die Dokumentation der W3C-Schulen.

Sie können dieses Symbol in ein beliebiges , auf einer Schriftart basierendes Symbol ändern , 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 Formen

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 den Mauszeiger über die Schaltfläche bewegen

Ändern der Farbe

In diesem Beispiel werden wir die Farbe der Schaltfläche ändern. Wir werden auch die Textgröße, die Textfarbe und die Schriftart in diesem Beispiel ä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 Formen

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;
}

Bei dieser Beispielschaltfläche wurden die Farbe, die Hintergrundfarbe, die Schriftgröße, die Schriftart und die 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 legen können.

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önnen Sie den Box-Shadow auch nur beim Hover 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 Formen

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 bei Hover 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 den Box-Shadow auf der Schaltfläche entweder immer oder nur beim Hovern an, je nachdem, welches Snippet Sie verwenden

Und das sind nur einige Beispiele dafür, wie einfach es ist, die Submit-Schaltfläche mit CSS zu personalisieren. Möchten Sie auch Ihre Formularbeschriftungen personalisieren? Werfen Sie einen Blick auf unser Tutorial über das Hinzufügen von Bildern vor oder nach Ihren Formularbeschriftungen.

FAQ

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

A: Absolutely, to use any of these examples with standard buttons when using the Page Breakbutton.wpforms-page-button.

Wenn Sie nur ein einzelnes Formular anvisieren möchten, können Sie alternativ die Option form#wpforms-form-3221 button.wpforms-page-buttonCSS-Klasse, und vergessen Sie nicht, die Formular-ID zu aktualisieren, damit sie mit Ihrer eigenen Formular-ID übereinstimmt.

Zum Beispiel, Animation auf schweben Beispiel wie oben für die Schaltfläche " Senden" gezeigt, werden wir das gleiche für die Seite Pause Tasten als gut zu 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 aktualisieren, damit sie Ihrer eigenen ID entspricht. Wenn Sie wissen möchten, wie Sie Ihre Formular-ID finden, lesen Sie bitte unsere nützliche 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ürde für alle Formulare gelten.

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 Schaltflächen für den Seitenumbruch

Tagged
Stecken Sie immer noch fest? Wie können wir helfen?
Zuletzt aktualisiert am 29. August 2023