> ## 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-zmina-dizajnu-knopok-u-globalnih-nalashtuvannyah) * [Зміна дизайну окремої кнопки](#3-zmina-dizajnu-okremoyi-knopki) ### Зміна дизайну кнопок у глобальних налаштуваннях 1. Натисніть на іконку **Стилі сайту** зліва на панелі керування: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-1_xlhml9.png) 2. У вікні, що з'явиться, перейдіть до секції **Кнопки**, де ви зможете або обрати один з готових пресетів ①: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-2_17qhtgt.png) … або якщо ви хочете самостійно налаштувати вигляд кнопки, просто натисніть на той варіант, який хочете відредагувати. Наразі доступно два варіанти дизайну кнопок, які ви можете налаштувати: **Головна** ② та **Другорядна** ③. || ${color}[#ffa800](Примітка:) ви також можете перейти до налаштувань окремих варіантів кнопок через список пресетів, для цього просто натисніть на обраний пресет, і ви перейдете у меню, де зможете обрати варіант, який ви хочете відредагувати. Кожен з цих варіантів можете мати **Основний** ① та **Альтернативний** ② дизайн, і для кожного варіанту кнопки ви можете налаштувати дизайн для **світлого** ③ та **темного** ④ фону окремо: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-3_8k6vzh.png) 3. Після того, як ви обрали тип кнопки, у новому вікні ви зможете відредагувати наступні параметри: У секції **Форма кнопки** ви можете для кожного з варіантів стандартного розміру кнопки налаштувати окремо **Відступи** ① та **Заокруглення кутів** ②: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr_ttwgov.png) | ${color}[#1aa900](Підказка:) ви також можете налаштовувати заокруглення кожного з кутів окремо, для цього натисніть на іконку поруч із полем градуса заокруглення. **Колір заливки** Ви можете окремо налаштувати колір кнопки у **стандартному стані** ① та **під час наведення** на неї ②. У випадаючому меню ③ ви маєте змогу вибрати, чи колір буде суцільною заливкою, чи градієнтом. ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-4_fu3ga7.png) **Колір межі** Аналогічно з кольором заливки, ви можете для двох станів кнопки налаштувати межу — чи це суцільна лінія, наприклад, чи пунктир, що ви можете обрати через випадаючий список ① та її колір: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-5_aqlgtf.png) | ${color}[#1aa900](Підказка:) оберіть опцію Без фону у випадаючому списку, якщо бажаєте, щоб кнопка просто мала заливку кольором, без межі. **Колір тексту** Перейдіть до вкладки **Текст**, щоб налаштувати його колір для двох станів кнопки: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-6_1cr4j3t.png) **Тіні** У рамках цієї функції ви можете вказувати положення тіні по осях Х та У, розмиття тіні та її розмір, окремо для дизайну кнопки у стандартному стані та під час наведення: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-1_1nkzd2s.png) ||| ${color}[#f97700](Важливо:) не забудьте окремо налаштувати дизайн кнопок для темного фону: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-7_nlbdl9.png) ### Зміна дизайну окремої кнопки 1. Для того, аби змінити дизайн конкретної кнопки на сайті, натисніть на неї та клікніть по «шестерні», аби перейти до налаштувань: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-8_1e84sxm.png) ... якщо у вас кнопка з [абсолютним позиціонуванням](/uk/article/absolyutne-pozicionuvannya-elementiv-u-zvichajnih-blokah-2kzydj/) чи [закріплена на екрані](/uk/article/zakriplennya-elementiv-na-ekrani-pid-chas-prokrutki-s3oz9k/), вам також необхідно натиснути на неї, лише іконка налаштувань буде зверху: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-9_1jh89ge.png) 2. Відкрийте вкладку **Стиль** у новому вікні та оберіть доречний тип (**Основна**, **Другорядна** або **Посилання**), стиль та розмір кнопки: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-10_lxscn0.png) | ${color}[#1aa900](Підказка:) обирайте **Основний** тип для кнопок із закликом до важливої дії — наприклад, «Відправити заявку». **Другорядний** тип краще використовувати для кнопок із закликом дещо меншого значення — наприклад, «Переглянути портфоліо». Тип **Посилання** призначений для відображення додаткової інформації — наприклад, «Дізнатися більше». | ${color}[#1aa900](Підказка:) вибравши Кастомний розмір, ви зможете задати власні відступи відносно тексту у кнопці, зокрема окремо для кожного з пристроїв. 3. Окрім цього, ви можете додати до кнопки іконку, а також змінити її вирівнювання відносно тексту: ![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/zmina-dizainu-knopki-ukr-11_8ric7c.png) 4. Не забудьте [опублікувати свій сайт](https://help.weblium.com/uk/article/publikaciya-sajtu-16hom55/), аби зміни відобразилися на ньому. || ${color}[#ffa800](Примітка:) додайте перехід з кнопки на сторонній ресурс, іншу сторінку або блок відповідно до інструкцій у статті [Додавання посилань до елементів](https://help.weblium.com/uk/article/dodavannya-posilan-do-elementiv-v2cfvc/).