Изменение дизайна кнопки

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

В этой статье вы узнаете, как настраивать различные варианты дизайна кнопок.

Вы также можете посмотреть нашу короткую видеоинструкцию по этой теме:

Содержание:

Изменение дизайна кнопок в глобальных настройках
Изменение дизайна отдельной кнопки

Изменение дизайна кнопок в глобальных настройках

Нажмите на иконку Стили сайта слева на панели управления:

В появившемся окне перейдите в раздел Кнопки, где вы сможете либо выбрать один из готовых пресетов ①:

… или, если вы хотите самостоятельно настроить вид кнопки, просто нажмите на тот вариант, который хотите отредактировать. Сейчас доступно два варианта дизайна кнопок, которые вы можете настроить: Главная ② и Второстепенная ③.

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

Каждый из этих вариантов может иметь Основной ① и Альтернативный ② дизайн, и для каждого варианта кнопки вы можете настроить дизайн для светлого ③ и темного ④ фона отдельно:

После того, как вы выбрали тип кнопки, в новом окне вы сможете отредактировать следующие параметры:

В секции Форма кнопки **вы можете для каждого из вариантов стандартного размера кнопки настроить отдельно **Отступы ① и Закругление углов ②:

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

Цвет заливки

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

Цвет границы

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

Подсказка: выберите опцию Без фона в выпадающем списке, если хотите, чтобы кнопка просто имела заливку цветом, без границы.

Цвет текста

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

Тени

В рамках этой функции вы можете указывать положение тени по осям Х и У, размытие тени и ее размер, отдельно для дизайна кнопки в стандартном состоянии и при наведении:

Важно: не забудьте отдельно настроить дизайн кнопок для темного фона:

Изменение дизайна отдельной кнопки

Чтобы изменить дизайн конкретной кнопки на сайте, нажмите на нее и кликните по «шестерне», чтобы перейти к настройкам:

... если у вас кнопка с абсолютным позиционированием или закреплена на экране, вам также необходимо нажать на нее, только иконка настроек будет сверху:

Откройте вкладку Стиль в новом окне и выберите подходящий тип (Основная, Второстепенная или Ссылка), стиль и размер кнопки:

Подсказка: выбирайте Основной тип для кнопок с призывом к важному действию — например, «Отправить заявку». Второстепенный тип лучше использовать для кнопок с призывом несколько меньшего значения — например, «Просмотреть портфолио». Тип Ссылка предназначен для отображения дополнительной информации — например, «Узнать больше».

Кроме того, вы можете добавить к кнопке иконку, а также изменить ее выравнивание относительно текста:

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

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

Последнее изменение: 13/11/2025

Была ли эта статья полезна?

Спасибо!