tentativa | HTML e CSS: Classes, posicionamento e Flexbox

1) Espaçamento e tamanho dos botões
css
Copiar
Editar
.botoes-container {
  display: flex;
  gap: 16px; /* espaçamento entre os botões */
  justify-content: center;
}

.botao {
  width: 150px;
  height: 50px;
}
 2) Melhorando a visibilidade dos botões
css
Copiar
Editar
.botao {
  font-size: 18px; /* texto maior */
  color: #ffffff; /* cor da fonte */
  background-color: #1f1f1f; /* fundo escuro */
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* sombra */
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

.botao:hover {
  background-color: #333333;
}
 3) Criando uma classe comum para os botões
HTML:

html
Copiar
Editar
<div class="botoes-container">
  <a href="https://instagram.com" class="botao">Instagram</a>
  <a href="https://github.com" class="botao">GitHub</a>
</div>
CSS (já incluso nos exemplos acima):

css
Copiar
Editar
.botao {
  /* propriedades comuns para os dois botões */
}
 4) Ajustando o espaçamento interno dos botões
css
Copiar
Editar
.botao {
  padding: 12px 24px; /* top-bottom | left-right */
}
 5) Importando e aplicando a fonte correta
No HTML (no <head>):

html
Copiar
Editar
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
CSS:

css
Copiar
Editar
.botao {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-decoration: none; /* remove sublinhado */
}