Wie Sie mit CSS den Absenden Button anpassen

26. September 2023

Abgesehen von den vorgefertigten Stilen des Absenden Buttons können Sie Ihren Absenden Button auch mit CSS anpassen. Sorgen Sie dafür, dass sich Ihre Besucher wohl fühlen, wenn sie ihre Daten abschicken, und erhöhen Sie Ihre Konversionsraten.

Youtube Embed Poster: C0fzIsZA2r8

So ändern Sie das Aussehen Ihres Absenden-Buttons mit CSS

  1. Wählen Sie im Formular-Generator das Farbroller-Symbol in der oberen rechten Ecke, um den Formular-Designer zu öffnen.
  2. Im Bereich Formulardesigner auf der rechten Seite gehen Sie oben auf Stile.
  3. Scrollen Sie nach unten zu Benutzerdefiniertes CSS einfügen.
Wie Sie mit CSS den Absenden Button anpassen Image-1
  1. Wenden Sie Ihr eigenes CSS an oder verwenden Sie den folgenden Code:
.form-submit-button {
background: #0066A2;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold15px arial,sans-serif;
text-shadow: none;
}

Um das aufzuschlüsseln

  • font — The text font properties.
  • .form-submit-button — Der Selektor für den Absenden-Button in Ihrem Formular.
  • background — Die Farbe hinter dem Text.
  • color — Bestimmt die Textfarbe.
  • border-style — Legt den Stil der Ränder Ihrer Absende-Schaltfläche fest.
  • border-color — Die Farbe der Umrandung Ihres Absenden-Buttons.
  • height — Legt die Höhe Ihres Buttons in Pixeln fest.
  • width — Die Breite Ihres Buttons in Pixeln.
  • font — Die Eigenschaften der Textschrift.

So sieht der Button danach aus:

Wie Sie mit CSS den Absenden Button anpassen Image-2

Um Ihrer Absenden-Schaltfläche einen Hover-Effekt hinzuzufügen, können Sie den folgenden CSS-Beispielcode verwenden:

.form-submit-button {
background: #B9DFFF;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
}
.form-submit-button:hover {
background: #016ABC;
color: #fff;
border: 1px solid #eee;
border-radius: 20px;
box-shadow: 5px 5px 5px #eee;
text-shadow: none;
}

Hier sehen Sie, wie der Button aussieht, wenn er ruht und wenn Sie mit dem Mauszeiger darüber fahren:

Wie Sie mit CSS den Absenden Button anpassen Image-3
Support kontaktieren:

Unser Kundensupport-Team ist rund um die Uhr erreichbar und die durchschnittliche Antwortzeit beträgt zwischen ein und zwei Stunden.
Sie können unser Team erreichen über:

Support Forum: https://www.jotform.com/answers/

Kontakt zum Jotform Support: https://www.jotform.com/contact/

Kommentar abschicken:

Jotform Avatar
Diese Seite ist durch reCAPTCHA geschützt und es gelten die Google Datenschutzbestimmungen und Nutzungsbedingungen.

Podo Comment Schreiben Sie den ersten Kommentar.