Como adicionar um botão à lição

No Kwiga, você pode adicionar um botão de duas maneiras:

1. Método rápido – permite definir a cor e o texto do botão.

2. Usando código – permite editar qualquer parâmetro, como raio da borda, tamanho, cor do contorno, altura e muito mais.
   

Adição rápida

Abra a aula onde deseja adicionar um botão e insira o elemento “Texto, Imagem, Inserção de Código”. Clique na área onde deseja colocar o botão e selecione +Botão na barra de ferramentas do editor de texto.

No menu que se abre, você pode adicionar um link, definir o nome do botão e personalizar a cor do botão e do texto. Clique em Salvar e o botão será adicionado à sua aula!

Adicionar um botão via código

Você pode adicionar um botão a uma aula do curso ou a um maratona usando código HTML. Mostramos como fazer isso abaixo.

Abra a aula onde deseja adicionar um botão e insira o elemento “Texto, Imagem, Inserção de Código”.

Depois, abra o editor de código (se você não vir a barra de ferramentas do editor de texto — clique na área branca para ativar o campo de entrada):

O editor de código será aberto (uma área preta na tela) e, na parte superior do menu, você verá botões para adicionar modelos de código prontos. Para criar um botão, selecione Botão:



Você verá o código na página, e acima dele verá o botão.

Você também pode personalizar o tamanho da fonte no botão, o padding, a largura do botão e ajustar o raio das bordas.

Você pode definir a cor do botão usando código RGB ou HEX, um conversor ou uma ferramenta de seleção de cores.

Colocar vários botões na mesma linha

Para criar vários botões lado a lado, é necessário um código adicional. Abaixo está o código para três botões com os textos "Base", "Comfort" e "Pro", cada um em uma cor diferente. Você pode editar as partes correspondentes do código, alterando o texto, a cor, o formato do botão e não se esqueça de adicionar o 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>

As áreas destacadas em amarelo indicam onde a cor do botão é definida.