كيفية تخصيص زر الإرسال باستخدام CSS

بخلاف الأنماط الجاهزة لزر الإرسال، يمكنك أيضًا تخصيص زر الإرسال الخاص بك باستخدام CSS. امنح زوارك شعورًا بالرضا عند إرسال معلوماتهم وارفع معدلات التحويل الخاصة بك.

Watch on youtube

How to create custom submit buttons

لتغيير مظهر زر الإرسال الخاص بك باستخدام CSS

1. في مٌنشئ النماذج، افتح مُصمم النموذج على اليمين.

2. في اللوحة اليمنى، انتقل إلى الأنماط في الأعلى.
3. انزل للأسفل وصولًا إلى إدخال رمز CSS المخصص.

4. أدخل رمز CSS المخصص أو استخدم الكود التالي:

.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 — محدد زر الإرسال في نموذجك.
• background — اللون خلف النص.
• color — يحدد لون النص.
• border–style — يحدد نمط حدود زر الإرسال الخاص بك.
• border–color — لون حدود زر الإرسال الخاص بك.
• height — يحدد ارتفاع زر الإرسال بالبكسل.
• width — عرض زر الإرسال بالبكسل.
• font — خصائص خط النص.

إليك كيف يبدو الزر بعد ذلك:

لإضافة تأثير عند تمرير الماوس إلى زر الإرسال الخاص بك، يمكنك استخدام نموذج كود CSS التالي:

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

إليك كيف يبدو الزر في وضع السكون وعند تمرير الماوس فوقه: