Кнопка далее для сайта: Как сделать Кнопки Далее назад

какие кнопки стоит использовать на сайте — Дизайн на vc.ru

Перевод статьи контент-дизайнера студии Deliveroo Рэйчел Макконнелл.

6625 просмотров

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

Действие — движение

Кнопка призыва к действию нужна, чтобы побудить что-то сделать. Текст кнопки должен указывать направление: чтобы пользователь двигался вперёд или назад по сайту. Также действием может быть подтверждение: «Понятно», «Хорошо» или «Я понял».

Если на странице одновременно размещены кнопки движения вперёд и назад, то текст на них должен согласоваться. Рассмотрим несколько примеров.

Непоследовательный текст

Здесь текст кнопок несогласован: «Предыдущая» — прилагательное, «Продолжить» — глагол. И ещё слово «Предыдущая» кажется слишком пассивным, оно не призывает к действию.

Лучше

Здесь текст согласуется лучше. Хотя «Следующая» подразумевает движение вперёд, всё же кнопка достаточно пассивна. «Предыдущая» звучит неестественно, лучше использовать здесь что-то менее формальное.

Лучший вариант

Это гораздо лучше, потому что здесь два глагола, это простые английские слова, которые хорошо согласуются друг с другом.

Объяснить следующий шаг

Пользователи хотят выполнить задачу с минимальными усилиями. Текст на кнопке призыва к действию должен быть ориентирован на задачу, так пользователь поймёт, каким будет следующий шаг.

Кнопка также должна помогать пользователю ориентироваться, подтверждать, что он находится там, где надо. Когда вы придумываете текст для кнопки, ведущей к следующей задаче, он должен согласовываться с заголовком следующего экрана.

Дезориентирует

Пользователь нажимает на «Оплатить», а на следующем экране видит — «Авторизоваться». Даже если нужно авторизоваться, чтобы заплатить, это всё равно путает пользователя. На этом этапе лучше написать «Авторизоваться, чтобы оплатить».

Лучше

В этой версии есть слово «Платёж» и на кнопке призыва к действию, и в заголовке следующего экрана, то есть этот вариант уже более последовательный. Но «Ваш платёж» в заголовке, всё ещё дезориентирует, особенно если пользователь ещё ничего не платил.

Лучший вариант

Эта версия последовательна, здесь пользователь будет чувствовать себя увереннее, потому что ясно: он оказался там, где и хотел, когда кликнул на кнопку призыва к действию.

Не создавайте загадки

Из текста на кнопке должно быть сразу понятно, что произойдёт, если на неё нажать.

Неясно

Новый пользователь не поймёт, зачем ему нажимать на эту кнопку. Он может предположить, что она перенаправит его на всё, что связано с личным кабинетом, но тут не понятно, зачем туда идти и потребуется ли там авторизация. Пользователь просто ничего не будет знать, пока не кликнет на кнопку.

Лучше

Это вариант лучше, уже понятно, что пользователя попросят авторизоваться, но всё ещё не понятно, зачем ему это делать.

Лучший вариант

Теперь пользователь точно знает, зачем ему кликать на эту кнопку — чтобы перейти к одной из задач, касающихся политики сайта. Текст не только ориентирован на задачу, но и понятен.

Опыт должен быть лёгким

Важно подумать над тоном сообщения. Например, согласно нашему руководству по стилю изложения материала, лучше выбрать более эмоциональный стиль для приложения, с помощью которого нужно вдохновить пользователей на покупку еды.

Но если речь идёт о приложении для водителей, то в таком случае мы бы выбрали более функциональные тексты для кнопок.

Ниже пример того, как сделать кнопку призыва к действию чуть более вдохновляющей.

Не вдохновляет

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

Лучше

Этот вариант уже более неформальный благодаря использованию первого лица. Но тут всё равно не хватает эмоциональности.

Лучший вариант

Это гораздо более эмоциональный вариант. Использование «Начнём!» говорит пользователю о том, что он не один, создаёт впечатление поддержки на всём пути пользователя.

Сделайте текст короче

Слишком длинный

Этот текст ориентирован на задачу, здесь используется первое лицо. Но слово «Сейчас» кажется лишним, а «Ввести заново» — слишком длинно. Текст сложно прочесть.

Лучше

Здесь мы избавились от всех лишних деталей, но если эта кнопка находится рядом с полем ввода пароля, то и слово «Пароль» может быть лишним.

Лучший вариант

Это сообщение короче, но оно по-прежнему ориентировано на задачу.

Избегайте двойного отрицания

Пользователь не должен волноваться, нажимая на кнопку. Двойное отрицание может запутать пользователя.

Путает

Что именно приведёт к действию «Отменить»: «Продолжить» или «Отменить»? Вариант «Отменить отмену» запутает пользователя.

Лучше

Здесь уже понятнее, потому что написаны простые «Да» и «Нет». Но здесь нет глаголов, поэтому не понятно, что произойдёт дальше.

Лучший вариант

Если здесь разместить «Сохранить» и «Отменить», то пользователь поймёт, что делает и что будет дальше.

Если действие закончено — отпразднуйте

Если пользователь подошёл к концу пути и вам нужно поставить здесь кнопку, почему бы не напомнить пользователю, что он успешно выполнил свою задачу? Давайте представим, что пользователь завершил регистрацию.

Стандартный

Текст часто используется, он очень пассивный.

Лучше

Благодаря использованию первого лица сообщение кажется более активным и показывает, каким будет следующий шаг (назад к домашней странице или на страницу личного кабинета).

Это подходит, когда нужно сказать, что будет дальше. Но текст на кнопке слишком длинный.

Лучший вариант

Это короткий и говорящий о действии текст, а восклицание добавит ему индивидуальности. Здесь также есть ощущение достижения цели.

Блог | Интернет-студия 100АП

Как правильно оформлять СТА-кнопки

Аббревиатура СТА, произносится [ситиэй], пришла к нам из западных материалов по улучшению конверсии и означает «призыв к действию» (от «call to action»). Под словом «СТА-кнопка» подразумевают ту кнопку на странице сайта или интернет-магазина, которую пользователь должен нажать по мнению создателей страницы. Обычно это такие кнопки как «купить», «заказать» и так далее. 

Словом «СТА-элементы» обозначают сопутствующие элементы, если желаемое действие на сайте состоит не только из нажатия кнопки, а из выполнения и каких-то других действий – например, ввода своего email-адреса, выбора нужного размера, и т. д. Такие поля для ввода, выбора значения и сама форма сбора контактных данных обычно совокупно называются «СТА-элементы».

Но не все СТА-кнопки одинаково хороши! Предлагаем вашему вниманию несколько правил, как повысить конверсию вашего сайта с помощью «правильных» СТА-кнопок.

СТА-кнопка должна резко контрастировать с цветовой схемой страницы

Казалось бы, это очевидно. Если вы создаете страницу сайта и хотите, чтобы пользователь после ее просмотра нажал определенную кнопку, то, наверное, ее стоит сделать, яркой и контрастной к остальному содержимому, чтобы она была хорошо заметна? Это кажется очень логичным, но зачастую эта логика «разбивается о быт» брендбуков, где большое внимание уделяется визуальной эстетичности, а высокий контраст и бросающиеся в глаза элементы считаются дурным вкусом и несоблюдением фирменного стиля.

Однако представим себе среднестатистического посетителя сайта. Он ищет решение какой-то проблемы и уже исследовал несколько сайтов в поисках идеального предложения в удовлетворении его потребности. Он уже достаточно устал от поиска информации, ему надо решить свою проблему, желательно – поскорее. Не надо заставлять его разгадывать ментальные ребусы вроде «а куда же нажать-то надо?»

Поэтому кнопка должна максимально контрастировать и быть заметной на фоне сайта. Посетитель должен ее заметить, даже если у него серьезные проблемы со зрением! Серые кнопки на сером фоне серого сайта – это может и выглядит стильно, но совершенно не конверсионно.

Вот хороший пример. Согласитесь, на таком сайте вам не пришлось бы ломать голову, какая кнопка является целевой.

А вот гораздо менее удачный пример — страница всем известного интернет-магазина. Вроде бы она должна побуждать нас купить рекламируемый товар. Но что это? Кнопка «Купить» просто незаметна на этой странице. Зато яркие лого и кнопка «Акции», словно созданы для того, чтобы увести нас с этой страницы.

Создавайте кликабельные кнопки

Современный тренд в сторону так называемого «плоского дизайна», словно заставляет веб-дизайнеров соревноваться, кто сделает кнопку менее похожей на кнопку.

Запомните, кнопка должна выглядеть как кнопка (не как ссылка, не как какой-то непонятный элемент интерфейса). Желательно, объемной и визуально похожей на кнопку, а не как рамка со скругленными краями. Рассмотрим несколько примеров.

Что от нас хотят здесь? Надо полагать, чтобы мы нажали ссылку «стать клиентом». А вы попробуйте для начала ее найти на экране?

Эта ссылка не только не сделана в форме кнопки, она даже не подчеркнута, чтобы показать, что это ссылка, и ее можно кликнуть!

Разве было бы плохо, если бы эта ссылка была оформлена в виде кнопки, которая просто просится, чтобы ее нажали? Например, вот так:

Ниже показан удачный пример: согласитесь, такую кнопку сложно не заметить. Она объемна, она похожа на кнопку. К тому же ее форма в виде стрелки решает еще одну интерфейсную проблему – она указывает пользователю, что перед тем, как «купить», неплохо бы выбрать нужную разновидность товара.

Тщательно подбирайте слова

Это касается не только самой СТА-кнопки, но и других СТА-элементов, формы, текста в ней, если такие есть.

Старайтесь избегать слов в СТА-элементах, которые связаны с какими-то сложностями, нежелательными действиями.

Типичный пример СТА-кнопки на карточке товара в интернет-магазине: «купить». Что это подразумевает? Расстаться с деньгами. Ой! Может быть лучше использовать слова «в корзину»? Ведь ничего страшного не случится, если я положу товар в корзину, не правда ли? Я потом могу и не покупать, если не захочу.

Вот совсем неудачный пример. Что нам здесь обещают? «Новинки, скидки, предложения» легко транслируются в мозгу потребителя в «поток рекламы на мой email». Вот уж спасибо, такого счастья не надо!

Старайтесь избегать слов, которые не дают конкретики о том, что будет дальше. Это касается таких слов, как «отправить заявку» или «отправить» (подразумевается – форму). «Ок!», — думает посетитель: «Я отправлю заявку, а дальше-то, что будет?»

Попробуйте использовать слова, которые не несут в себе стойкой ассоциации с чем-то негативным – с расставанием с деньгами, с потоком нежелательной рекламы.

Наиболее выигрышные слова — это «получить» и «узнать». Они изначально обещают некую пользу. И они отлично подходят для тех случаев, когда производится сбор заявок, но только не в форме «подпишись на нашу рассылку», а с предложением действительно получить что-то полезное, как в примере ниже:

Попробуйте привнести больше личного, отказаться от банальных кнопок в одно слово.

Вот хороший пример. СТА-кнопка обещает получение информации, полезной для тех, кто попал на эту страницу.

Располагайте СТА-элементы в самом начале

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

Но никогда не делайте так, как на примере ниже, здесь плохо всё. Форма в самом конце страницы, излишнее поле «сообщение» в форме, скучный серый цвет и сливающаяся с зеленым цветом футера СТА-кнопка в форме.

Не мучайте пользователя выбором

В идеале CTA-кнопка должна быть одна. Ок, в некоторых случаях их может быть две, например, «в корзину» или «в избранное». «Попробовать бесплатно» или «войти». В таких случаях еще есть какая-то очевидность, в каком случае и куда нажимать пользователю.

Но посмотрите на этот пример ниже. Куда тут нажимать? Желтую кнопку «Заказать»? А что я закажу? Тут и разные виды хостинга, и домены, и конструктор сайтов. А еще тут, кажется, можно «проверить» домен, ок. А что делает зеленая кнопка «Заказать»? Она заказывает что-то другое? А еще тут есть кнопки «Подробнее», и онлайн-консультант приглашает написать ему. Господи, куда нажимать-то?

В заключение хотим предложить еще одно правило: «обязательно тестируйте».

Чем хорош интернет-маркетинг – тем, что он опирается на факты и цифры.

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

Поэтому крайне желательно проводить так называемое «А/В-тестирование», то есть показывать разным пользователям сайта два варианта страниц, вариант А и вариант В. Делается это с целью замерить конверсию от разных вариантов, чтобы выбрать наиболее подходящий результат.

Пробуйте, экспериментируйте, и хорошей вам конверсии!

ID: 909
Название: Как правильно оформлять СТА-кнопки
Картинка для анонса: 
Детальное описание: 

Словом «СТА-элементы» обозначают сопутствующие элементы, если желаемое действие на сайте состоит не только из нажатия кнопки, а из выполнения и каких-то других действий – например, ввода своего email-адреса, выбора нужного размера, и т. д. Такие поля для ввода, выбора значения и сама форма сбора контактных данных обычно совокупно называются «СТА-элементы».

Но не все СТА-кнопки одинаково хороши! Предлагаем вашему вниманию несколько правил, как повысить конверсию вашего сайта с помощью «правильных» СТА-кнопок.

СТА-кнопка должна резко контрастировать с цветовой схемой страницы

Казалось бы, это очевидно. Если вы создаете страницу сайта и хотите, чтобы пользователь после ее просмотра нажал определенную кнопку, то, наверное, ее стоит сделать, яркой и контрастной к остальному содержимому, чтобы она была хорошо заметна? Это кажется очень логичным, но зачастую эта логика «разбивается о быт» брендбуков, где большое внимание уделяется визуальной эстетичности, а высокий контраст и бросающиеся в глаза элементы считаются дурным вкусом и несоблюдением фирменного стиля.

Однако представим себе среднестатистического посетителя сайта. Он ищет решение какой-то проблемы и уже исследовал несколько сайтов в поисках идеального предложения в удовлетворении его потребности. Он уже достаточно устал от поиска информации, ему надо решить свою проблему, желательно – поскорее. Не надо заставлять его разгадывать ментальные ребусы вроде «а куда же нажать-то надо?»

Поэтому кнопка должна максимально контрастировать и быть заметной на фоне сайта. Посетитель должен ее заметить, даже если у него серьезные проблемы со зрением! Серые кнопки на сером фоне серого сайта – это может и выглядит стильно, но совершенно не конверсионно.

Вот хороший пример. Согласитесь, на таком сайте вам не пришлось бы ломать голову, какая кнопка является целевой.

А вот гораздо менее удачный пример — страница всем известного интернет-магазина. Вроде бы она должна побуждать нас купить рекламируемый товар. Но что это? Кнопка «Купить» просто незаметна на этой странице. Зато яркие лого и кнопка «Акции», словно созданы для того, чтобы увести нас с этой страницы.

Создавайте кликабельные кнопки

Современный тренд в сторону так называемого «плоского дизайна», словно заставляет веб-дизайнеров соревноваться, кто сделает кнопку менее похожей на кнопку.

Запомните, кнопка должна выглядеть как кнопка (не как ссылка, не как какой-то непонятный элемент интерфейса). Желательно, объемной и визуально похожей на кнопку, а не как рамка со скругленными краями. Рассмотрим несколько примеров.

Что от нас хотят здесь? Надо полагать, чтобы мы нажали ссылку «стать клиентом». А вы попробуйте для начала ее найти на экране?

Эта ссылка не только не сделана в форме кнопки, она даже не подчеркнута, чтобы показать, что это ссылка, и ее можно кликнуть!

Разве было бы плохо, если бы эта ссылка была оформлена в виде кнопки, которая просто просится, чтобы ее нажали? Например, вот так:

Ниже показан удачный пример: согласитесь, такую кнопку сложно не заметить. Она объемна, она похожа на кнопку. К тому же ее форма в виде стрелки решает еще одну интерфейсную проблему – она указывает пользователю, что перед тем, как «купить», неплохо бы выбрать нужную разновидность товара.

Тщательно подбирайте слова

Это касается не только самой СТА-кнопки, но и других СТА-элементов, формы, текста в ней, если такие есть.

Старайтесь избегать слов в СТА-элементах, которые связаны с какими-то сложностями, нежелательными действиями.

Типичный пример СТА-кнопки на карточке товара в интернет-магазине: «купить». Что это подразумевает? Расстаться с деньгами. Ой! Может быть лучше использовать слова «в корзину»? Ведь ничего страшного не случится, если я положу товар в корзину, не правда ли? Я потом могу и не покупать, если не захочу.

Вот совсем неудачный пример. Что нам здесь обещают? «Новинки, скидки, предложения» легко транслируются в мозгу потребителя в «поток рекламы на мой email». Вот уж спасибо, такого счастья не надо!

Старайтесь избегать слов, которые не дают конкретики о том, что будет дальше. Это касается таких слов, как «отправить заявку» или «отправить» (подразумевается – форму). «Ок!», — думает посетитель: «Я отправлю заявку, а дальше-то, что будет?»

Попробуйте использовать слова, которые не несут в себе стойкой ассоциации с чем-то негативным – с расставанием с деньгами, с потоком нежелательной рекламы.

Наиболее выигрышные слова — это «получить» и «узнать». Они изначально обещают некую пользу. И они отлично подходят для тех случаев, когда производится сбор заявок, но только не в форме «подпишись на нашу рассылку», а с предложением действительно получить что-то полезное, как в примере ниже:

Попробуйте привнести больше личного, отказаться от банальных кнопок в одно слово.

Вот хороший пример. СТА-кнопка обещает получение информации, полезной для тех, кто попал на эту страницу.

Располагайте СТА-элементы в самом начале

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

Но никогда не делайте так, как на примере ниже, здесь плохо всё. Форма в самом конце страницы, излишнее поле «сообщение» в форме, скучный серый цвет и сливающаяся с зеленым цветом футера СТА-кнопка в форме.

Не мучайте пользователя выбором

В идеале CTA-кнопка должна быть одна. Ок, в некоторых случаях их может быть две, например, «в корзину» или «в избранное». «Попробовать бесплатно» или «войти». В таких случаях еще есть какая-то очевидность, в каком случае и куда нажимать пользователю.

Но посмотрите на этот пример ниже. Куда тут нажимать? Желтую кнопку «Заказать»? А что я закажу? Тут и разные виды хостинга, и домены, и конструктор сайтов. А еще тут, кажется, можно «проверить» домен, ок. А что делает зеленая кнопка «Заказать»? Она заказывает что-то другое? А еще тут есть кнопки «Подробнее», и онлайн-консультант приглашает написать ему. Господи, куда нажимать-то?

В заключение хотим предложить еще одно правило: «обязательно тестируйте».

Чем хорош интернет-маркетинг – тем, что он опирается на факты и цифры.

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

Поэтому крайне желательно проводить так называемое «А/В-тестирование», то есть показывать разным пользователям сайта два варианта страниц, вариант А и вариант В. Делается это с целью замерить конверсию от разных вариантов, чтобы выбрать наиболее подходящий результат.

Пробуйте, экспериментируйте, и хорошей вам конверсии!

Детальная картинка: 
Количество показов: 18619
TIlda скрипты: 
Tilda стили: 

дизайнов кнопки «Далее», тем, шаблонов и загружаемых графических элементов на Dribbble

1. Посмотреть MONO от Echo Design System

   МОНО от Echo Design System

2. Посмотреть музыкальное производство иллю

   Музыкальное производство Иллю

3. Посмотреть счетчики фитнес-приложений

   Фитнес-приложение Счетчики

4. Кнопка «Просмотр» // «Далее» — «Предыдущее действие»

   Кнопка // Далее — Предыдущее действие

5. Посмотреть процесс создания баннера недвижимости

   Процесс создания баннера недвижимости

6. Просмотр работы из дома

   Работа на дому

7. Просмотр игрока

   Игрок

8. Просмотр компонентов пользовательского интерфейса приложения Sleep

   Компоненты пользовательского интерфейса приложения Sleep

9. Посмотреть мнемоническую страницу резервного копирования кошелька Brave

   Храбрый бумажник Резервная мнемоника стр.

10. Посмотреть иллюстрацию смарт-часов Pebble

    Иллюстрация умных часов Pebble

11. Посмотреть серфкемп

    Серфкемп

12. Просмотр всплывающей страницы мнемоники резервного копирования кошелька Brave

    Храбрый кошелек Резервная копия Мнемоника Всплывающая страница

13. Просмотр светлых элементов пользовательского интерфейса

    Светлые элементы пользовательского интерфейса

14. Просмотр всплывающего окна с выигрышной игрой

    Всплывающее окно с выигрышем

15. Посмотреть яхты Путешествия

    Яхты для путешествий

16. View CTA Exit Pop-up + Simple Form (Digital Agency ~ Harmony)

    Всплывающее окно с призывом к действию + простая форма (Digital Agency ~ Harmony)

17. Посмотреть следующий 👉🏻 «Центр умного дома»

    Очередной 👉🏻 «Центр умного дома»

18. Просмотр разделов интерактивной справки

    Разделы интерактивной справки

19. Просмотр приложения «Калькулятор диеты» — снимки основных экранов

    Приложение «Калькулятор диеты» — снимки основных экранов

20. Просмотр начального экрана

    Вводный экран

21. Посмотреть Каковы ваши следующие приоритеты? 🔨

    Каковы ваши следующие приоритеты? 🔨

22. Просмотр экранов загрузки KYC

    Загрузка экранов KYC

23. Посмотреть приложение Gifte: награды следующего уровня

    Приложение Gifte: награды следующего уровня

24. Посмотреть следующую музыку

    Следующая музыка

Зарегистрируйтесь, чтобы продолжить или войдите в систему

Загрузка еще…

Настройка кнопок «Назад» и «Далее» в многостраничных формах

Хотите настроить кнопки «Назад» и «Далее» в многостраничных формах? Настройка кнопок ваших форм может стать отличным способом добавить индивидуальности и стиля вашему сайту.

В этом уроке мы рассмотрим, как настроить стиль кнопок «Назад» и «Далее» вашей многостраничной формы.

• Стилизация кнопок «Назад» и «Далее»
• Настройка стилей наведения
• Пример CSS

---

Прежде чем начать, убедитесь, что WPForms установлен и активирован на вашем сайте и что вы подтвердили свою лицензию. Затем вы можете создать свою первую форму и добавить в нее поле разрыва страницы.

Стилизация кнопок «Назад» и «Далее»

CSS обеспечивает невероятную гибкость для настройки кнопок «Назад» и «Далее» в WPForms, а также любых других аспектов вашей формы.

Если вы новичок в CSS или хотите освежить свои знания, лучше всего начать с нашего вводного руководства по CSS.

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

Вот CSS по умолчанию для кнопок «предыдущая» и «следующая» WPForms, а также комментарии, чтобы отметить, что делает каждая строка CSS:

 div. wpforms-container-full .wpforms-form .wpforms-page-button {
    цвет фона: #eee; /* Серый фон */
    граница: 1px сплошная #ddd; /* Темно-серая рамка */
    цвет: #333; /* Черный цвет текста */
    размер шрифта: 1em; /* Размер текста */
    отступ: 10px 15px; /* Расстояние между текстом и границей */
}
 

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

Во-первых, нам нужно найти шестнадцатеричные коды цветов, которые мы хотим использовать. htmlcolorcodes.com и Adobe Color CC — это полезные бесплатные инструменты, которые помогут вам выбрать цвета.

Когда у нас есть шестнадцатеричные коды для цветов, которые мы хотим, мы можем добавить их в наш CSS:

 div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #e27730 !важно; /* Оранжевый фон */
    цвет: #fff !важно; /* Белый текст */
}
 

Примечание . При добавлении CSS на ваш сайт может потребоваться указать !important перед точкой с запятой, чтобы убедиться, что ваши пользовательские стили успешно применены. Ознакомьтесь с нашим руководством по устранению неполадок CSS для получения более подробной информации.

Далее нам нужно добавить этот CSS на наш сайт. Самый простой способ сделать это — использовать CSS-редактор WordPress. Для этого перейдите в Appearance » Customize и выберите Additional CSS .

Открыв раздел «Дополнительные CSS», вы можете добавить свой новый CSS. Затем нажмите кнопку Опубликовать , и все готово!

Вот как теперь будут выглядеть наши кнопки с применением нашего примера CSS:

Примечание : Возникли проблемы с отображением недавно добавленного CSS на вашем сайте? Ознакомьтесь с нашим руководством по устранению этой проблемы.

Настройка стилей наведения

CSS также позволяет применять совершенно разные стили, когда пользователи наводят курсор на кнопку. Это изменение помогает улучшить взаимодействие с пользователем, поскольку оно позволяет пользователям понять, что на кнопку можно нажать.

Ниже приведен CSS по умолчанию для стилей наведения кнопок WPForms. Как отмечено в комментариях, цвет фона становится немного темнее, а цвет границы — немного светлее: полная .wpforms-form .wpforms-page-button:active { цвет фона: #ddd; /* Более темный серый фон */ граница: 1px сплошная #ccc; /* Светлая серая рамка */ }

Вы могли заметить, что это намного меньше CSS, чем вы видели для кнопки, когда она не наведена. Это связано с тем, что CSS применит все предыдущие стили к вашей наведенной кнопке, если не указано иное.

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

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

 div.wpforms-container-full .wpforms-form .wpforms-page-button: hover, div.wpforms-container-full .wpforms-form .wpforms-page-button: active {
    background-color: #cd631d !важно; /* Темно-оранжевый фон */
}
 

Вот как будут выглядеть кнопки с примененным CSS:

Пример CSS

Теперь, когда мы рассмотрели основы, давайте рассмотрим полный пример пользовательского CSS для кнопок «предыдущий» и «следующий».

Примечание: Приведенный ниже код заменит кнопки «Назад» и «Далее» для всех многостраничных форм на вашем сайте, созданных с помощью WPForms.

Если вы хотите стилизовать кнопки «Назад» и «Далее» только для одной формы, вам нужно найти уникальный идентификатор для этой формы. Для получения дополнительной информации см. наше полное руководство по стилизации контактных форм с помощью CSS.

Вот CSS, который мы добавим для этого примера, включая изменения стиля при наведении:

 /* Новые стили кнопок */
div. wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #003B6D !важно; /* Темно-синий фон */
    граница: 2px сплошная #BDBDBD !важно; /* Серая рамка */
    цвет: #fff !важно; /* Белый текст */
    размер шрифта: 1em !важно; /* Увеличиваем размер текста */
    вес шрифта: полужирный !важно; /* Жирный текст */
    отступ: 16px !важно; /* Увеличиваем расстояние между текстом и границей */
    ширина: 25% !важно; /* Сделать кнопку шириной в четверть */
}

/* Новые стили наведения на кнопку */
div.wpforms-container-full .wpforms-form .wpforms-page-button: hover, div.wpforms-container-full .wpforms-form .wpforms-page-button: active {
    background-color: #BDBDBD !важно; /* Серый фон */
    граница: 2px сплошная #003B6D !важно; /* Темно-синяя рамка */
}
 

Ниже показано, как будут выглядеть наши настроенные кнопки с применением этого CSS:

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

Вот и все! Теперь вы можете настроить кнопки «Назад» и «Далее» с помощью пользовательского CSS.