Как да персонализирате бутона за изпращане с CSS

9 януари 2023 г.

АКТУАЛИЗАЦИЯ: Опитайте видео курс за дизайнера на форми, за да създадете фантастични стилове за бутона за изпращане! Знаете ли, че зеленото и синьото са най-релаксиращите цветове? Ето защо те се използват от най-популярните уебсайтове, за да помогнат на потребителите да се чувстват добре сърфирайки в тези уебсайтове. Бутоните за изпращане в уеб формите също трябва да са правилни, защото там хората споделят най-чувствителната си информация. С това ръководство ще научите как да персонализирате вашите бутони за изпращане, така че да можете да накарате посетителите си да се чувстват добре, когато изпращат тяхната информация и да увеличите процента на конверсии.

1. Щракнете върху иконата на “Дизайнер на форма”

Как да персонализирате бутона за изпращане с CSS Image-1

  2. Отидете в раздела “CSS” и поставете следния CSS код или вашите персонализирани CSS кодове.  

Как да персонализирате бутона за изпращане с CSS Image-2

.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

Детайли за 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

и при задържане на курсора на мишката върху него:

Как да персонализирате бутона за изпращане с CSS Image-5

Детайли за всеки CSS3 код за вашия бутон за изпращане

.form-submit-button: hover – Това е класа, когато мишката се задържи върху

бутона за изпращане. Всяко друго поле остава същото, с изключение на

фона, за да покаже какво се случва при задържане на мишката.

border-radius – Закръглява ъгъла на вашите бутони за изпращане.

box-shadow – Задава сянка за вашия бутон за изпращане.

text-shadow(не се прилага за пример) – Задава сянка за текста във вашия

бутон за изпращане.

Как се справихте? Моля споделете вашите мисли или предложения в

раздела за коментари по-долу.

Свържете се с екипа за поддръжка:

Нашият екип за поддръжка на клиенти е на разположение денонощно и средното ни време за реакция е между един и два часа.
С нашия екип можете да се свържете чрез:

Форум за поддръжка: https://www.jotform.com/answers/

Свържете се с поддръжката на Jotform: https://www.jotform.com/contact/

Изпратете коментар:

Jotform Avatar
Този сайт е защитен от реКАПЧА и Декларацията за поверителност и Общи условия.

Podo Comment Бъдете първите, които коментират.