How to add button to the lesson

On Kwiga, you can add a button in two ways:

1. Quick method – allows you to set the button’s color and text.
   

2. Using code – lets you edit any parameters such as border radius, size, outline color, height, and more.
   

Quick Addition

Open the lesson where you want to add a button and insert a “Text, Image, Code Embedding” element. Click on the area where you want to place the button and select +Button from the text editor toolbar.

In the menu that opens, you can add a link, set the button name, and customize the button and text color. Click Submit, and the button will be added to your lesson!

Adding a Button via Code

You can add a button to a course lesson or marathon using HTML code. We’ll show you how to do this below.

Open the lesson where you want to add a button and insert the “Text, Image, Code Embedding” element.

Then open the code editor (if you don't see the text editing toolbar — click in the white area to activate the text input field):

The code editor will open (a black area on the screen), and at the top of the menu, you’ll see buttons for adding ready-made code templates. To create a button, select Button:




You will see the code on the page, and above it, you will see your button.

You can also customize the font size on the button, padding, the button’s width, and adjust the border radius.

You can set the button color using RGB or HEX code, a converter, or a color picker tool.

Placing multiple buttons in a row

To create multiple buttons that are placed next to each other, additional code is required. Below is the code for three buttons with the text "Base", "Comfort", and "Pro" in three different colors. You can edit the corresponding parts of the code, changing the text, color, button format, and also remember to add the link.



<!-- 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>

The yellow-highlighted areas indicate where the button color is specified.