1
resposta

Espaçamento entre botões

Exercício 1-espacamento e tamanhos dos botões:

<div class="apresentacao__links">
  <a class="apresentacao__links__link" href="https://www.instagram.com/thiagomartinscarvalho" target="blank"
  >instagram
  </a>    
  <a class="apresentacao__links__link" href="https://github.com/thiagomsc"target="blank">Guithub</a>
</div>
.apresentacao__links{
  display:flex;
  justify-content:space-between;
}

.apresentacao__links__link{
  background-color:#22d4fd;
  width:280px;
  }

Exercício 2: Melhorando a visibilidade dos botões -aumentar tamanho das fontes -font-size -alterar as cores- background-color cor de fundo -color cor da letra -border-top- bordar no topo -box-shadown-sobra do botão

.apresentacao__links__link{
  background-color:#22d4fd;
  width:280px;
  text-align: center;
  border-top:8px solid red;
  box-shadow:8px 15px white;
  font-size:24px;
  color: #000000;
  }

Exercício 3:Criando uma classe comum para botões

<div class="apresentacao__links">
      <a class="apresentacao__links__link" href="https://www.instagram.com/thiagomartinscarvalho" target="blank"
      >instagram
      </a>    
      <a class="apresentacao__links__link" href="https://github.com/thiagomsc"target="blank">Guithub</a>
    </div>

Exercício 4: ajustando o espaçamento interno dos botões.

.apresentacao__links__link{
  
  padding: 21.5px 0;
}

Exercicio5:importando e aplicando a fonte correta.

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

.apresentacao__links__link{
font-weight: 600;
  padding:21.5px 0;
  text-decoration: none;
}
1 resposta

Oi, Thiago! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Você mostrou um bom domínio na construção e estilização dos botões, especialmente ao aplicar espaçamento, sombra e ajuste de fonte. Ficou claro que você está testando várias propriedades do CSS com atenção aos detalhes.

Uma dica interessante para o futuro é usar o gap em containers com display: flex para espaçar os elementos, evitando depender do space-between, que distribui os itens igualmente, mas sem controle direto sobre a distância entre eles. Veja este exemplo:


.apresentacao__links {
  display: flex;
  gap: 16px;
}

Esse código usa gap para definir um espaçamento fixo entre os botões.

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