Lista de exercícios: Manipulando botões

1 - Espaçamento e Tamanho dos Botões Para ajustar o espaçamento e o tamanho dos botões, você pode usar Flexbox para alinhar horizontalmente e adicionar margens para espaçamento adequado.

HTML:

<div class="botoes-container">
  <button class="botao">Botão 1</button>
  <button class="botao">Botão 2</button>
</div>

CSS:

.botoes-container {
  display: flex;
  justify-content: center; /* Centraliza os botões horizontalmente */
  gap: 10px; /* Espaçamento entre botões */
}

.botao {
  padding: 10px 20px; /* Ajusta o tamanho dos botões */
  font-size: 16px; /* Tamanho adequado da fonte */
}

2 - Melhorando a Visibilidade dos Botões Para aumentar a visibilidade e acessibilidade, aumentamos o tamanho da fonte, ajustamos as cores e adicionamos sombras.

.botao {
  padding: 10px 20px;
  font-size: 18px; /* Tamanho da fonte aumentado */
  color: #fff; /* Cor do texto */
  background-color: #007bff; /* Cor de fundo */
  border: none;
  border-radius: 5px; /* Arredondamento dos vértices */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidade */
  transition: background-color 0.3s; /* Transição suave para efeito */
}

.botao:hover {
  background-color: #0056b3; /* Efeito hover */
}

3 - Criando uma Classe Comum para Botões Crie uma classe comum chamada botao-comum para aplicar estilos aos botões "Instagram" e "GitHub".

HTML:

<button class="botao-comum instagram">Instagram</button>
<button class="botao-comum github">GitHub</button>

CSS:

.botao-comum {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 5px;
}

.instagram {
  background-color: #e4405f; /* Cor específica para Instagram */
}

.github {
  background-color: #333; /* Cor específica para GitHub */
}

4 - Ajustando o Espaçamento Interno dos Botões Use a propriedade padding para ajustar o espaçamento interno dos botões, garantindo consistência visual.

.botao {
  padding: 15px 25px; /* Ajuste conforme o design do Figma */
}

5 - Importando e Aplicando a Fonte Correta Importe a fonte Montserrat com peso 600 do Google Fonts e aplique-a aos botões.

@import no CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

.botao {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600; /* Aplicação do peso da fonte */
  text-decoration: none; /* Remove sublinhado padrão */
  color: #fff; /* Garantindo a cor do texto */
}