Статті на: Редактор
Ця стаття також доступна на:

Зміна дизайну кнопки

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

У цій статті ви дізнаєтеся, як налаштовувати різні варіанти дизайну кнопок.


Ви можете також переглянути нашу коротку відеоінструкцію на цю тему:


Зміст:



Зміна дизайну кнопок у глобальних налаштуваннях


  1. Натисніть на іконку Стилі сайту зліва на панелі керування:

  1. У вікні, що з'явиться, перейдіть до секції Кнопки, де ви зможете або обрати один з готових пресетів ①:

… або якщо ви хочете самостійно налаштувати вигляд кнопки, просто натисніть на той варіант, який хочете відредагувати. Наразі доступно два варіанти дизайну кнопок, які ви можете налаштувати: Головна ② та Другорядна ③.


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


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

  1. Після того, як ви обрали тип кнопки, у новому вікні ви зможете відредагувати наступні параметри:


У секції Форма кнопки ви можете для кожного з варіантів стандартного розміру кнопки налаштувати окремо Відступи ① та Заокруглення кутів ②:

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


Колір заливки


Ви можете окремо налаштувати колір кнопки у стандартному стані ① та під час наведення на неї ②. У випадаючому меню ③ ви маєте змогу вибрати, чи колір буде суцільною заливкою, чи градієнтом.


Колір межі


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


Підказка: оберіть опцію Без фону у випадаючому списку, якщо бажаєте, щоб кнопка просто мала заливку кольором, без межі.


Колір тексту


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


Тіні


У рамках цієї функції ви можете вказувати положення тіні по осях Х та У, розмиття тіні та її розмір, окремо для дизайну кнопки у стандартному стані та під час наведення:


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


Зміна дизайну окремої кнопки


  1. Для того, аби змінити дизайн конкретної кнопки на сайті, натисніть на неї та клікніть по «шестерні», аби перейти до налаштувань:

... якщо у вас кнопка з абсолютним позиціонуванням чи закріплена на екрані, вам також необхідно натиснути на неї, лише іконка налаштувань буде зверху:

  1. Відкрийте вкладку Стиль у новому вікні та оберіть доречний тип (Основна, Другорядна або Посилання), стиль та розмір кнопки:

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


  1. Окрім цього, ви можете додати до кнопки іконку, а також змінити її вирівнювання відносно тексту:

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


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





Оновлено: 13/11/2025

Чи була ця стаття корисною?

Поділіться своїм відгуком

Скасувати

Дякуємо!