Настройка кнопки «Отправить» CSS · Formstack Blog

1. 1. Текстовые кнопки
2. 2. Графические кнопки
3. Больше примеров CSS
4. Стиль кнопки 1
5. Стиль кнопки 2
6. Усовершенствуйте кнопки отправки формы

Дата последнего обновления: 9 февраля 2016 г.

Один из распространенных запросов поддержки, который мы видим здесь, в Formstack, заключается в том, что клиенты нуждаются в помощи для настройки внешнего вида своих форм с помощью CSS. В частности, мы часто получаем вопросы о том, как сделать так, чтобы кнопка отправки формы в нижней части формы выглядела иначе или лучше соответствовала цветовой схеме веб-сайта. Сегодня я подумал, что мне нужно немного поработать над CSS, который вы можете использовать, чтобы оживить ваши кнопки отправки. (Некоторые из селекторов CSS, которые я буду использовать, относятся к Formstack, но код CSS можно использовать повторно для любой формы HTML.)

Чтобы добавить пользовательский CSS в форму, вам нужно будет либо добавить этот CSS в тема формы внутри Formstack или добавьте его прямо на ваш сайт (если вы встраиваете свою форму на свой сайт).

Вот несколько примеров того, как вы можете настроить кнопку отправки формы CSS:

1. Текстовые кнопки

Наш первый пример изменяет основные цвета и интервал кнопки отправки формы по умолчанию. Посмотрите на кнопку отправки CSS ниже.

.fsSubmitButton {border-top: 2px solid # a3ceda; Граница слева: 2px solid # a3ceda; Граница справа: 2px solid # 4f6267; нижняя граница: 2px solid # 4f6267; отступы: 10px 20px! важно; размер шрифта: 14 пикселей! важно; цвет фона: # c4f1fe; вес шрифта: полужирный; цвет: # 2d525d; }

• Класс CSS .fsSubmitButton является классом самой кнопки отправки.
• Иногда вам нужно добавить тег «Важно» в некоторые стили, если они не работают. Этот тег заставляет веб-браузер использовать этот стиль над всеми остальными. Это может быть проблемой, если для вашей кнопки отправки уже заданы другие правила CSS.

Конечно, вы можете изменить этот CSS, чтобы использовать цвета, специфичные для вашего сайта. Приведенные выше правила CSS сделают вашу кнопку похожей на эту:

Отправить мою форму

2. Графические кнопки

Другой популярный способ стилизации кнопок отправки - это использование графики вместо изменения отдельных стилей кнопок. Если вы можете создать изображение кнопки и разместить его на своем веб-сайте, вы можете использовать правила CSS, чтобы использовать изображение в качестве кнопки вместо кнопки по умолчанию. Посмотрите на кнопку отправки CSS ниже.

.fsSubmitButton {background-image: url (signup.png); повторение фона: без повтора; цвет фона: прозрачный; высота: 66 пикселей; ширина: 182 пикселя; граница: нет; текстовый отступ: -999em; }

• Часть правила «url ()» будет содержать ссылку на изображение размещенной кнопки.
• Правила высоты и ширины будут меняться в зависимости от размера изображения кнопки.
• Правила цвета фона и границ установлены таким образом, чтобы отключить стиль кнопок по умолчанию, чтобы отображалось только изображение вашей кнопки.
• Строка с отступом текста выталкивает текст кнопки по умолчанию с экрана, чтобы изображение кнопки было ясно видно. Этот метод позволяет программам чтения с экрана все еще находить текст вашей кнопки.

Приведенные выше правила CSS сделают вашу кнопку отправки похожей на это:

Как вы можете видеть, мы лишь кратко описываем множество возможных способов стилизации кнопок отправки. Иногда лучший способ - поиграть с разными стилями и значениями, пока вы не получите желаемый вид.

Больше примеров CSS

Хотите увидеть больше примеров оформления кнопки отправки? Вот два дополнительных примера CSS, которые помогут вам начать новую онлайн-форму:

Стиль кнопки 1

Отправить мою форму

.fsSubmitButton {padding: 10px 15px 11px! важный; размер шрифта: 18 пикселей! важно; цвет фона: # 57d6c7; вес шрифта: полужирный; тень для текста: 1px 1px # 57D6C7; цвет: #ffffff; радиус границы: 5 пикселей; -moz-border-radius: 5px; -webkit-border-radius: 5px; граница: 1px solid # 57D6C7; курсор: указатель; тень от рамки: 0 1px 0 rgba (255, 255, 255, 0,5); -moz-box-shadow: 0 1px 0 вставка rgba (255, 255, 255, 0.5); -webkit-box-shadow: 0 1px 0 rgba (255, 255, 255, 0.5); }

Стиль кнопки 2

Отправить мою форму

.fsSubmitButton {padding: 10px 20px 11px! важный; размер шрифта: 21 пикселей! важно; цвет фона: # F36C8C; вес шрифта: полужирный; тень для текста: 1px 1px # F36C8C; цвет: #ffffff; радиус границы: 100 пикселей; -moz-border-radius: 100px; -webkit-border-radius: 100px; граница: 1px solid # F36C8C; курсор: указатель; тень от рамки: 0 1px 0 rgba (255, 255, 255, 0,5); -moz-box-shadow: 0 1px 0 вставка rgba (255, 255, 255, 0.5); -webkit-box-shadow: 0 1px 0 rgba (255, 255, 255, 0.5); }

Усовершенствуйте кнопки отправки формы

У всего этого CSS твоя голова кружится? Если вы являетесь пользователем Formstack, есть хорошая новость: вы можете быстро и легко настроить кнопку отправки прямо в конструкторе форм! Посмотрите наш документ поддержки на Как изменить кнопку отправки для подробных инструкций.

И узнать все о оптимизация кнопки формы посмотрите наше видео с семью шагами, чтобы улучшить кнопки отправки.

Похожие

Комментарии