Wie Sie mit CSS den Absenden Button anpassen

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.

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.

4. 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:

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: