АКТУАЛИЗАЦИЯ: Опитайте видео курс за дизайнера на форми, за да създадете фантастични стилове за бутона за изпращане! Знаете ли, че зеленото и синьото са най-релаксиращите цветове? Ето защо те се използват от най-популярните уебсайтове, за да помогнат на потребителите да се чувстват добре сърфирайки в тези уебсайтове. Бутоните за изпращане в уеб формите също трябва да са правилни, защото там хората споделят най-чувствителната си информация. С това ръководство ще научите как да персонализирате вашите бутони за изпращане, така че да можете да накарате посетителите си да се чувстват добре, когато изпращат тяхната информация и да увеличите процента на конверсии.
1. Щракнете върху иконата на “Дизайнер на форма”
![Как да персонализирате бутона за изпращане с CSS Image-1](https://cms.jotform.com/uploads/image_upload/image_upload/global/130071_firefox_zEKUKj6Cxc.png?1.0.449&v=1.0.449&v=1.0.449)
2. Отидете в раздела “CSS” и поставете следния CSS код или вашите персонализирани CSS кодове.
![Как да персонализирате бутона за изпращане с CSS Image-2](https://cms.jotform.com/uploads/image_upload/image_upload/global/130072_firefox_p47Wx3vZf4.png?1.0.449&v=1.0.449&v=1.0.449)
.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; }
Ето как ще изглежда след това
![Как да персонализирате бутона за изпращане с CSS Image-3](https://cms.jotform.com/uploads/image_upload/image_upload/global/130073_chrome_Lmue6504mF.png?1.0.449&v=1.0.449&v=1.0.449)
Детайли за CSS кода за вашия бутон за изпращане
.form-submit-button – Избира бутона за изпращане във вашата форма.
background – Задава цвета на фона зад текста. color – Определя цвета на вашия текст.
border-style – Задава стила на бордовете на вашите бутони за изпращане.
border-color – Задава цвета на вашите бордове на бутона за изпращане.
height – Задава височината на вашия бутон и се обозначава с пиксели.
width – Задава ширината на вашия бутон и се обозначава с пиксели.
font – Задава свойствата на шрифта.
ЗАБЕЛЕЖКА: Не забравяйте да добавите точка и запетая (;) след всяко свойство.
Бутон за изпращане CSS3 и ефект при задържане на курсора
Следвайте стъпките за промяна на бутона за изпращане, както по-горе.
Единственото нещо, което се променя е кода.
Примерен CSS3 за бутон за изпращане:
.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;
}
Ето как изглежда.
![Как да персонализирате бутона за изпращане с CSS Image-4](https://cms.jotform.com/uploads/image_upload/image_upload/global/130074_chrome_aAS2QIOzlI.png?1.0.449&v=1.0.449&v=1.0.449)
и при задържане на курсора на мишката върху него:
![Как да персонализирате бутона за изпращане с CSS Image-5](https://cms.jotform.com/uploads/image_upload/image_upload/global/130075_chrome_Jcb0qGMC7P.png?1.0.449&v=1.0.449&v=1.0.449)
Детайли за всеки CSS3 код за вашия бутон за изпращане
.form-submit-button: hover – Това е класа, когато мишката се задържи върху
бутона за изпращане. Всяко друго поле остава същото, с изключение на
фона, за да покаже какво се случва при задържане на мишката.
border-radius – Закръглява ъгъла на вашите бутони за изпращане.
box-shadow – Задава сянка за вашия бутон за изпращане.
text-shadow(не се прилага за пример) – Задава сянка за текста във вашия
бутон за изпращане.
Как се справихте? Моля споделете вашите мисли или предложения в
раздела за коментари по-долу.
Изпратете коментар: