--- url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA' title: 'Оберіть стилі кнопок, які ведуть відвідувачів | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:59:15+00:00' updated: '2026-10-24T20:03:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Ви вирішуєте, наскільки помітною буде кожна кнопка. Суцільна кнопка позначає одну дію, яку ви хочете найбільше, а контурна кнопка поруч пропонує альтернативу, не конкуруючи. Ця сторінка показує, як стилізувати таку пару і яке налаштування що змінює. Як додати кнопку та встановити її посилання, див. Додавання кнопки.' tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:03:43+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Оберіть стилі кнопок, які ведуть відвідувачів' description: 'Ви вирішуєте, наскільки помітною буде кожна кнопка. Суцільна кнопка позначає одну дію, яку ви хочете найбільше, а контурна кнопка поруч пропонує альтернативу, не конкуруючи. Ця сторінка показує, як стилізувати таку пару і яке налаштування що змінює. Як додати кнопку та встановити її посилання, див. Додавання кнопки.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:59:15+0000' dateModified: '2026-10-24T20:03:43+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA' articleSection: 'Посібники з дизайну' - '@type': WebPage '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%BD%D0%BE%D0%BF%D0%BE%D0%BA' description: 'Ви вирішуєте, наскільки помітною буде кожна кнопка. Суцільна кнопка позначає одну дію, яку ви хочете найбільше, а контурна кнопка поруч пропонує альтернативу, не конкуруючи. Ця сторінка показує, як стилізувати таку пару і яке налаштування що змінює. Як додати кнопку та встановити її посилання, див. Додавання кнопки.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/uk' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: uk --- [Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Стилізація елементів](/uk/hc/documentation/learn-dxpr-builder/element-settings) /[Посібники з дизайну](/uk/hc/documentation/learn-dxpr-builder/design/overview) # Оберіть стилі кнопок, які ведуть відвідувачів. Вивчення DXPR BuilderСтворення сторінокСтилізація елементівПосібники з дизайну ## In this guide Related guides - [Додавання кнопки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0) - [Змусьте елементи реагувати на наведення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F) - [Використовуйте кольори свого бренду](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BA%D0%BE%D0%BB%D1%8C%D0%BE%D1%80%D0%B8-%D1%82%D0%B0-%D0%B1%D1%80%D0%B5%D0%BD%D0%B4) Ви вирішуєте, наскільки помітною буде кожна кнопка. Суцільна кнопка позначає одну дію, яку ви хочете найбільше, а контурна кнопка поруч пропонує альтернативу, не конкуруючи. Ця сторінка показує, як стилізувати таку пару і яке налаштування що змінює. Як додати кнопку та встановити її посилання, див. [Додавання кнопки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0). Відео повторює кроки нижче: воно робить Apply now головною кнопкою й додає другу контурну кнопку. ## Стилізація головної та другої кнопок Почніть із кнопки на сторінці, наприклад **Apply now**. 1. Наведіть курсор на кнопку й відкрийте **More > Settings**. 2. Установіть **Type** у значення **Primary**. 3. Установіть **Size** у значення **Large** і натисніть **Save**. 4. Знову наведіть курсор на кнопку й відкрийте **More > Clone**. Копія з’явиться просто під оригіналом. 5. Відкрийте **More > Settings** на копії. Змініть її **Title**, наприклад на `Download brochure`, та її **Link**. 6. Увімкніть **Outline style** і натисніть **Save**. 7. Натисніть **Save** на панелі інструментів. ## Виберіть стиль для кожної дії | Дія | Стиль | Приклад | |---|---|---| | Одна дія, яку ви хочете найбільше | Суцільна **Primary** | Apply now | | Альтернатива | **Outline style** у тому самому **Type** | Download brochure | | Другорядна дія | **Link**, який виглядає як текстове посилання | Read the terms | | Попередження або останній крок | **Danger** або **Warning** | Cancel my booking | Використовуйте одну суцільну кнопку на розділ, щоб відвідувачі одразу бачили, куди натискати. Пишіть мітки, які кажуть, що станеться: «Get started», а не «Click here»; «Send message», а не «Submit». ## Що ви бачите Дві великі кнопки розташовуються в колонці одна під одною: суцільна з основним кольором вашої теми й контурна з рамкою та текстом того самого кольору. Суцільна першою привертає погляд. Під час редагування посилання не відкриваються. Щоб перевірити їх, збережіть сторінку, відкрийте меню перегляду (піктограма ока) і виберіть **Preview**. ## Налаштування | Налаштування | Що робить | Типово | |---|---|---| | **Type** | Стиль кольору: **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger**, **Link**, **Light** або **Dark**. Кольори беруться з вашої теми. | **Primary** | | **Outline style** | Кольорова рамка й текст без заливки | Вимкнено | | **Size** | **Normal**, **Large** або **Small** | **Normal** | | **Block button** | Розтягує кнопку на повну ширину її колонки | Вимкнено | | **Link target** | **Same window** або **New window**. Показується, коли **Link** має значення. | **Same window** | Для розробників тем: кожен **Type** додає клас Bootstrap `btn-`, наприклад `btn-primary`. З увімкненим **Outline style** він стає `btn-outline-`, крім **Link**, який завжди лишається `btn-link`. **Large** додає `btn-lg`, **Small** додає `btn-sm`, а **Block button** додає `btn-block`. ## Якщо ви не бачите стилю - **Контурна кнопка не показує рамки.** **Type** має значення **Link**, який завжди виглядає як текстове посилання, тож **Outline style** не діє. Виберіть інший **Type** для контурної кнопки. - **Кнопка майже зникає.** **Light** близький до білого, тож він губиться на білому розділі. Виберіть темніший **Type** або надайте розділу колір фону. - **Посилання відкривається в тій самій вкладці.** **Link target** має значення **Same window**, і воно показується лише коли **Link** має значення. Спершу заповніть **Link**, потім виберіть **New window**. ## Що далі? - [Додавання кнопки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%BD%D0%BE%D0%BF%D0%BA%D0%B0): усі налаштування кнопки, з відео. - [Ефекти наведення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%BD%D1%8F): затемнюйте кнопку або додавайте тінь, коли вказівник її досягає. - [Кольори та бренд](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BA%D0%BE%D0%BB%D1%8C%D0%BE%D1%80%D0%B8-%D1%82%D0%B0-%D0%B1%D1%80%D0%B5%D0%BD%D0%B4): тримайте кольори кнопок у злагоді з вашим брендом.