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

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

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

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

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

.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 – додаје сенку текста унутар дугмета (није примењено на овај пример).

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