Како прилагодити дугме за слање користећи CSS

28. јануар 2022.

Новост: Погледај наш видео курс о Дизајнеру обрасца да креираш супер стилове за дугме слања.

Да ли си знао да су зелена и плава боје које највише опуштају? Због тога се баш оне користе на најпопуларнијим сајтовима како бисмо се осећали пријатно док их користимо. Дугме за слање у онлајн обрасцима би такође требало да има исти осећај јер корисници помоћу њега деле осетљиве информације.

Уз овај водич ћеш сазнати како да прилагодиш дугме за слање како би се твоји посетиоци осећали боље приликом слања својих пријава и како би повећао стопу комплетирања.

Youtube Embed Poster: C0fzIsZA2r8

Додавање пеилагођеног CSS-а

Click the Form Designer icon. Then go to the Styles tab and paste the following CSS code or your custom CSS codes: Кликни на иконицу Дизајнера обрасца. Затим отвори картицу Стилови и налепи следећи CSS или свој прилагођени CSS.

Додавање прилагођеног 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;
}

Овако ће изгледати након додавања:

Прилагођено дугме за слање

Детаљи CSS кода за дугме

  • .form-submit-button – селектор дугмета за слање.
  • background – подешава позадинску боју дугмета.
  • color – одређује боју текста.
  • border-style – подешава стил ивице дугмета.
  • border-color – поставља поју ивице дугмета.
  • height – одређује висину дугмета изражену у пикселима.
  • width – одређује виширину сину дугмета изражену у пикселима.
  • font – подешава стил текстса.

БЕЛЕШКА: Не заборави да ставиш тачку-зарез ( ; ) на крају сваке линије

CSS3 дугмета за слање и ефекат приликом преласка курсора

Прати исте кораке као изнад да промениш стил дугмета. Само је потребно да измениш код

Пример CSS3 кода за дугме за слање:

.form-submit-button {
     background:#B9DFFF;
     color:#fff;
     border:1pxsolid#eee;
     border-radius:20px;
     box-shadow:5px5px5px#eee;
     text-shadow:none;
}
.form-submit-button:hover {
     background:#016ABC;
     color:#fff;
     border:1pxsolid#eee;
     border-radius:20px;
     box-shadow:5px5px5px#eee;
     text-shadow:none;
}

Овај код ће дати следећи резултат:

Пример дугмета за слање

А овако ће да изгледа уколико се пређе курсором преко њега:

Пример дугмета за слање

Детаљи CSS3 кода за дугме за слање

  • .form-submit-button:hover – this is the class when the mouse hovers onto the submit button. Every other field is left the same except the background to show what’s happening on mouse hover. Ово је класа која се користи када курсор пређе преко дугмета за слање. Свако друго поље је остало не промењено осим боје позадине, како би лакше приказали шта се дешава када се пређе курором преко дугмета.
  • border-radius – заокругљује ивице дугмета за слање.
  • box-shadow – додаје сенку дугмета за слање.
  • text-shadow – додаје сенку текста унутар дугмета (није примењено на овај пример).

Како си прошао? Подели своје мисли са нама у коментарима испод.

Контактирај подршку:

Наш тим подршке је доступан 24/7 и просечно време одговора је до 2 сата.
Можеш контактирати наш тим путем:

Форум подршке: https://www.jotform.com/answers/

Контактирај Jotform подршку: https://www.jotform.com/contact/

Пошаљи коментар:

Jotform Avatar
Овај сајт је заштићен reCAPTCHA-ом, а важе и Google правила о приватности и услови коришћења.

Podo Comment Буди први који ће прокоментарисати