> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Изменение дизайна кнопки Один из ключевых инструментов для поддержания целостного дизайна сайта — настройка внешнего вида кнопок. Задав общий дизайн в стилях сайта, вы сможете обеспечить их согласованность на всех страницах. В этой статье вы узнаете, как настраивать различные варианты дизайна кнопок. Вы также можете посмотреть нашу короткую видеоинструкцию по этой теме: ${youtube}[Изменение дизайна кнопки | Конструктор сайтов Weblium](oMItOhj7tBw) Содержание: * [Изменение дизайна кнопок в глобальных настройках](#3-izmenenie-dizajna-knopok-v-globalnyh-nastrojkah) * [Изменение дизайна отдельной кнопки](#3-izmenenie-dizajna-otdelnoj-knopki) ### Изменение дизайна кнопок в глобальных настройках 1. Нажмите на иконку **Стили сайта** слева на панели управления: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-1_1xd04ei.png) 2. В появившемся окне перейдите в раздел **Кнопки**, где вы сможете либо выбрать один из готовых пресетов ①: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-3_1q4bfjx.png) … или, если вы хотите самостоятельно настроить вид кнопки, просто нажмите на тот вариант, который хотите отредактировать. Сейчас доступно два варианта дизайна кнопок, которые вы можете настроить: **Главная** ② и **Второстепенная** ③. || ${color}[#ffa800](Примечание:) вы также можете перейти к настройкам отдельных вариантов кнопок через список пресетов, для этого просто нажмите на выбранный пресет, и вы перейдете в меню, где сможете выбрать вариант, который хотите отредактировать. Каждый из этих вариантов может иметь **Основной** ① и **Альтернативный** ② дизайн, и для каждого варианта кнопки вы можете настроить дизайн для **светлого** ③ и **темного** ④ фона отдельно: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-3_1t8osp0.png) 3. После того, как вы выбрали тип кнопки, в новом окне вы сможете отредактировать следующие параметры: В секции **Форма кнопки **вы можете для каждого из вариантов стандартного размера кнопки настроить отдельно **Отступы** ① и **Закругление углов** ②: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru_kwuxij.png) | ${color}[#1aa900](Подсказка:) вы также можете настраивать закругление каждого из углов отдельно, для этого нажмите на иконку рядом с полем градуса закругления. **Цвет заливки** Вы можете отдельно настроить цвет кнопки в **стандартном состоянии** ① и **при наведении** на нее ②. В выпадающем меню ③ вы можете выбрать, будет ли цвет сплошной заливкой или градиентом. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-4_xxpxsb.png) **Цвет границы** Аналогично цвету заливки, вы можете для двух состояний кнопки настроить границу — будет ли это сплошная линия, например, или пунктир, который вы можете выбрать из выпадающего списка ①, а также ее цвет: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-5_1enje3v.png) | ${color}[#1aa900](Подсказка:) выберите опцию Без фона в выпадающем списке, если хотите, чтобы кнопка просто имела заливку цветом, без границы. **Цвет текста** Перейдите на вкладку **Текст**, чтобы настроить его цвет для двух состояний кнопки: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-6_3wt42o.png) **Тени** В рамках этой функции вы можете указывать положение тени по осям Х и У, размытие тени и ее размер, отдельно для дизайна кнопки в стандартном состоянии и при наведении: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-1_1933ph.png) ||| ${color}[#f97700](Важно:) не забудьте отдельно настроить дизайн кнопок для темного фона: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-7_1x3dhew.png) ### Изменение дизайна отдельной кнопки 1. Чтобы изменить дизайн конкретной кнопки на сайте, нажмите на нее и кликните по «шестерне», чтобы перейти к настройкам: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-8_1swjvt9.png) ... если у вас кнопка с [абсолютным позиционированием](/ru/article/absolyutnoe-pozicionirovanie-elementov-v-obychnyh-blokah-rm5o4g/) или [закреплена на экране](/ru/article/fiksaciya-elementov-na-ekrane-pri-prokrutke-72tf5i/), вам также необходимо нажать на нее, только иконка настроек будет сверху: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-9_1a24r2e.png) 2. Откройте вкладку **Стиль** в новом окне и выберите подходящий тип (**Основная**, **Второстепенная** или **Ссылка**), стиль и размер кнопки: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-10_n67s2o.png) | ${color}[#1aa900](Подсказка:) выбирайте **Основной** тип для кнопок с призывом к важному действию — например, «Отправить заявку». **Второстепенный** тип лучше использовать для кнопок с призывом несколько меньшего значения — например, «Просмотреть портфолио». Тип **Ссылка** предназначен для отображения дополнительной информации — например, «Узнать больше». | ${color}[#1aa900](Подсказка:) выбрав Кастомный размер, вы сможете задать собственные отступы относительно текста в кнопке, в частности отдельно для каждого из устройств. 3. Кроме того, вы можете добавить к кнопке иконку, а также изменить ее выравнивание относительно текста: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ru-11_qhz7py.png) 4. Не забудьте [опубликовать свой сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), чтобы изменения отобразились на нем. || ${color}[#ffa800](Примечание:) добавьте переход с кнопки на сторонний ресурс, другую страницу или блок, следуя инструкциям в статье [Добавление ссылок на элементы](https://help.weblium.com/ru/article/dobavlenie-ssylok-na-elementy-1z04at0/).