[Projeto] Propostas de Resolução - Módulo 04. Manipulando Botões

Bom dia.

Segue proposta de resolução referente aos desafios do módulo 04. Manipulando Botões.

Desafio 1: CSS: criada classe para configurar os botões como um todo (será utilizada no Desafio 5).

.configura__botoes{
    background-color:#6123c4;
    width:280px;
    text-align:center;
    border-radius:20px;
    font-size:24px;
    font-weight:600;
    padding:21.5px 0;
    text-decoration:none;
    color:#FFFFFF;
    font-family: 'Montserrat', sans-serif;    
}

Desafio 2:

CSS: adaptados alguns itens da classe “configura__botoes”.

.configura__botoes{
    background-color:#FFFFFF;
    width:500px;
    text-align:center;
    border-radius:40px;
    font-size:48px;
    font-weight:900;
    padding:42.0px 0;
    text-decoration:none;
    color:#000000;
    font-family: 'Montserrat', sans-serif;    
}

HTML:

<a class="configura__botoes" href="https://www.site.com.br">Botao 1</a>
            <a class="configura__botoes" href="https://www.site.com.br">Botao 2</a>

Desafio 3:

Importando a Fonte (pelo código do Google Fonts):

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap')

CSS: adaptando a classe “configura__botoes” ao exercício proposto, com mudanças. No caso, apliquei o “padding” com as duas medidas.

.configura__botoes{
    background-color:#22D4FD; 
    width:300px;
    text-align:center;
    border-radius:15px;
    font-size:24px;
    font-weight:100;
    padding:18.0px 5px;
    text-decoration:none;
    color:#FFFFFF;
    font-family: 'Montserrat', sans-serif;    
}

Desafio 4:

CSS: ajustando o “padding” da classe “configura_botoes”.

.configura__botoes{
    background-color:#22D4FD; 
    width:300px;
    text-align:center;
    border-radius:15px;
    font-size:24px;
    font-weight:200;
    padding:25.0px 15px;
    text-decoration:none;
    color:#FFFFFF;
    font-family: 'Montserrat', sans-serif;    
}

Desafio 5: Importando a fonte: @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap')

HTML:
<a class="configura__botoes" href="https://instagram.com/rafaballerini">Texto do Botão 1</a>
            <a class="configura__botoes" href="https://github.com/guilhermeonrails">Texto do Botão 2</a>

CSS:

.configura__botoes{
    background-color:#6123c4;
    width:280px;
    text-align:center;
    border-radius:20px;
    font-size:24px;
    font-weight:600;
    padding:21.5px 0;
    text-decoration:none;
    color:#FFFFFF;
    font-family: 'Montserrat', sans-serif;    
}

Obrigado.