Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Manipulando botões - Exercício 04

  1. Espaçamento e tamanho dos botões | Melhorando a visibilidade dos botões:
\\código omitido
    .apresentacao__links__link {
        background-color: #22D4FD;
        width: 280px;
        text-align: center;
        border-radius: 16px;
        font-size: 24px;
        text-decoration: none;
        color: #000000;
    }
  1. Criando uma classe comum para botões:

HTML:

\\código omitido
                <div class="apresentacao__links">
                    <a class="apresentacao__links__link" href="https://instagram.com/imlais" target="_blank">Instagram</a>
                    <a class="apresentacao__links__link" href="https://github.com/moraeslais" target="_blank">Github</a>
                </div>
\\código omitido
  1. Ajustando o espaçamento interno dos botões | Importando e aplicando a fonte correta:
\\código omitido
    .apresentacao__links__link {
        background-color: #22D4FD;
        width: 280px;
        text-align: center;
        border-radius: 16px;
        font-size: 24px;
        font-weight: 600;
        padding: 21.5px 0;
        text-decoration: none;
        color: #000000;
        font-family: 'Montserrat', sans-serif;
    }
1 resposta
solução!

Olá, Laís, como vai?

Você organizou muito bem os estilos e conseguiu aplicar os pontos-chave da proposta. Além disso, criou uma classe comum que deixa o código mais limpo e reutilizável, o que é uma ótima prática. Uma dica opcional seria aplicar um hover nos botões, alterando levemente a cor de fundo, por exemplo, para indicar interação ao passar o mouse. Isso pode melhorar a experiência do usuário.

.apresentacao__links__link {
  background-color: #22d4fd;
  width: 280px;
  text-align: center;
  border-radius: 16px;
  font-size: 24px;
  font-weight: 600;
  padding: 21.5px 0;
  text-decoration: none;
  color: #000000;
  font-family: 'Montserrat', sans-serif;
  transition: background-color 0.3s ease;   /* Ajuste para um melhor efeito de transição */
}

.apresentacao__links__link:hover {
  background-color: #22d5fd6b; /* Customize a vontade */
}

Continue compartilhando seus projetos por aqui. O fórum está à disposição sempre que quiser trocar ideias ou tirar dúvidas.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!