На Kwiga можна додати кнопку двома способами:

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

Швидке додавання

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

У меню, що відкрилося, Ви можете додати посилання, назву кнопки і задати колір кнопки і тексту на кнопці. Натисніть Надіслати та кнопка вже у Вашому уроці!

Додавання кнопки через код

Додати кнопку в урок курсу або марафону можна за допомогою html коду. І ми розповімо, як це зробити нижче. Відкрийте урок, куди Ви хочете додати кнопку та додати елемент Текст, зображення, вставка коду.

Відкрийте редактор коду (якщо Ви не бачите смужку для редагування тексту – клацніть у білій області для введення тексту):

В вас відкриється редактор коду (чорна площина на екрані), а зверху у меню ви побачити кнопки для додавання готових шаблонів коду. Для створення кнопки оберіть Button: 

Ви побачите код на сторінці, а зверху Ви можете бачити свою кнопку. 

Ви також можете змінити розмір шрифту на кнопці, відступи, ширину самої кнопки та регулювати радіус заокруглення.

Задати колір кнопки Ви можете використовуючи RGB або HEX код, конвертер або інструмент підбору кольору.

Розміщення кількох кнопок у ряд

Для отримання кількох кнопок, які розташовані поруч один з одним, необхідно використовувати додатковий код. Нижче наведено код для трьох кнопок з текстом Base, Comfort та Pro відповідно трьох різних кольорів. Ви можете відредагувати відповідні місця в коді, змінивши текст на кнопка, колір, формат кнопки, а також не забудьте додати посилання.

<!-- Example Button -->

<div id="buttons-container">

    <a id="my-button" href="/"> Base </a>

    <a id="my-button" href="/"> Comfort </a>

    <a id="my-button" href="/"> Pro </a>

</div>

<style>

#buttons-container {

    display: flex;

    grid-gap: 20px;

    justify-content: center;

}

@media(max-width: 640px) {

    #buttons-container {

        flex-direction: column;

    }

}

#my-button {

    display: flex;

    margin: 0 auto;

    width: 100%;

    padding: 13px 20px;

    border-radius: 20px;

    color: rgb(255, 255, 255);

    background: orange;

    justify-content: center;

    &:first-child {

        background: green;

    }

    &:last-child {

        background: purple;

    }

}

</style>

Жовтим показано місця, де вказується колір кнопки.