Zusammenfassen mit:

Abgesehen von den integrierten Stilen des Absenden-Buttons können Sie die volle Kontrolle übernehmen, indem Sie ihn mit CSS anpassen. Gestalten Sie seine Farben, Typografie, Abstände und Hover-Effekte so, dass sie zum Design Ihres Formulars und zur Markenidentität passen. Ein gut gestalteter Absenden-Button sieht nicht nur besser aus, sondern schafft auch Vertrauen, lenkt die Aufmerksamkeit der Benutzer und sorgt für ein reibungsloses und zufriedenstellenderes Absenden-Erlebnis. Dies hilft Ihnen, das Engagement zu steigern und die Konversionsraten zu verbessern.

Egal, ob Sie ein neues Formular erstellen oder ein bestehendes bearbeiten, Sie können den Absenden-Button mit CSS in nur wenigen Schritten anpassen. So geht’s:

Klicken Sie im Formular-Generator auf das Farbroller-Symbol oben rechts auf der Seite.

Wie Sie mit CSS den Absenden Button anpassen Image-1

Öffnen Sie dann im Formulardesigner-Menü den Tab Stile.
Scrollen Sie als Nächstes nach unten zum Bereich Benutzerdefiniertes CSS einfügen und geben oder fügen Sie Ihren CSS-Code in das Code-Editor-Feld ein.
Sobald Sie fertig sind, klicken Sie auf das X-Symbol in der oberen rechten Ecke des Menüs, um es zu schließen, oder klicken Sie irgendwo außerhalb des Menüs.

Wie Sie mit CSS den Absenden Button anpassen Image-2

Individuelle CSS-Codes für den Absenden-Button

Wir haben eine Auswahl an sofort einsetzbaren CSS-Snippets zusammengestellt, die Sie schnell einfügen können, um den Absenden-Button Ihres Formulars anzupassen. Diese Beispiele sollen Ihnen helfen, das Erscheinungsbild zu verbessern, subtile Animationen hinzuzufügen und eine ansprechendere, markengerechte Einreichungserfahrung zu schaffen, ohne dass fortgeschrittene CSS-Kenntnisse erforderlich sind.

Neugierig, wie es in einem Live-Formular funktioniert? Schauen Sie sich diese Demo an.

/* Ändern Sie die Grundfarbe der Absenden-Schaltfläche */
.form-submit-button {
	background: #0066A2;
	color: white;
	border-style: outset;
	border-color: #0066A2;
	height: 50px;
	width: 100px;
	font: bold 15px arial,sans-serif;
	text-shadow: none;
}

/* Ändere die Farbe des Absenden-Buttons beim Überfahren mit der Maus. */
.form-submit-button:hover {
	background: #ff7c14;
	color: #fff;
	border: 1px solid #eee;
	box-shadow: 5px 5px 5px #eee;
	text-shadow: none;
}

/* Verwandle den Absenden-Button in einen Farbverlaufshintergrund mit Hover-Effekt */
.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;
}
.form-submit-button:hover {
	background: #ff7c14;
	color: #fff;
	border: 1px solid #eee;
	box-shadow: 5px 5px 5px #eee;
	text-shadow: none;
}

/* Füge einen Puls- oder Leuchteffekt beim Überfahren mit der Maus hinzu. */
.form-submit-button:hover {
  box-shadow: 0 0 15px rgba(1,106,188,0.6);
}

/* Füge ein Emoji neben dem Text der Schaltfläche „Absenden“ hinzu. */
.form-submit-button::after {
 content: " 🚀";
}

/* Fügen Sie einen Farbverlauf hinzu, der beim Überfahren mit der Maus den Absenden-Button mit einem Pfeil nach links anhebt. */
.form-submit-button {
  background: linear-gradient(135deg, #0066A2, #00c6ff);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.form-submit-button::after {
  content: " →";
  position: absolute;
  right: 20px;
  opacity: 0;
  transition: all 0.25s ease;
}
.form-submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.form-submit-button:hover::after {
  right: 14px;
  opacity: 1;
}
.form-submit-button:active {
  transform: scale(0.97);
}

/* Füge dem Absenden-Button einen Glassmorphismus- und Glüheffekt hinzu. */
.form-submit-button {
  background: rgba(255,255,255,0.1);
  color: #0066A2;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 12px 24px;
  transition: all 0.3s ease;
}
.form-submit-button:hover {
  background: rgba(0,102,162,0.15);
  box-shadow: 0 0 20px rgba(0,102,162,0.4);
  color: #004a78;
}

/* Füge dem Absenden-Button eine einfarbige, schimmernde Farbe hinzu und forme ihn etwas an.*/
.form-submit-button {
  background: #0066A2;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.form-submit-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.3);
  transform: skewX(-25deg);
}
.form-submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}

.form-submit-button:hover::before {
  animation: shimmer 0.8s;
}
@keyframes shimmer {
  100% { left: 125%; }
}

/* Füge dem AbsendenButton eine Kontur hinzu, die gleichzeitig mit einer leuchtenden Farbe gefüllt ist.*/
.form-submit-button {
  background: transparent;
  color: #0066A2;
  border: 2px solid #0066A2;
  border-radius: 999px;
  padding: 12px 26px;
  transition: all 0.3s ease;
}
.form-submit-button:hover {
  background: #0066A2;
  color: #fff;
  box-shadow: 0 0 12px rgba(0,102,162,0.6);
}

CSS

/* Wandelt den AbsendenButton in einen fettgedruckten CTA-Stil um. */
.form-submit-button {
  background: linear-gradient(135deg, #ff7c14, #ffb347);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.5px;
  transition: all 0.25s ease;
}
.form-submit-button:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(255,124,20,0.4);
}

Grundlegende Farbcodes für den Absendebutton

Wir haben auch eine Auswahl an grundlegenden Farbcodes beigefügt, mit denen Sie Ihre Formel ganz einfach gestalten können. Diese dienen als schneller Ausgangspunkt für die Anpassung Ihres Designs und helfen Ihnen dabei, ein sauberes und einheitliches Erscheinungsbild zu schaffen, ohne Farine von Grund auf auswählen zu müssen.

Farbname	Hex-Code
Rot	#FF0000
Orange	#FFA500
Gelb	#FFD700
Grün	#008000
Blau	#016ABC
Indigo	#4B0082
Violett	#8F00FF
Hellblau	#B9DFFF
Cyan	#00FFFF
Blaugrün	#008080
Kalk	#32CD32
Rosa	#FFC0CB
Magenta	#FF00FF
Lila	#800080
Braun	#8B4513
Beige	#F5F5DC
Weiß	#FFFFFF
Grau	#EEEEEE
Dunkelgrau	#555555
Schwarz	#000000

Wie Sie mit CSS den Absenden Button anpassen

Individuelle CSS-Codes für den Absenden-Button

Grundlegende Farbcodes für den Absendebutton