Entrar Ainda não tem acesso?
1
resposta

Modificando o estilo dos botões

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Preparando o layout do projeto e atividade Lista de exercícios

por Isabelle Gomes
| 3.9k xp | 3 posts
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
    <title>My social networks</title>
</head>
<body> 
    <h1 class="social">Social Media</h1>
    <section class="social__text"><p>Hi! I'm Isabelle and I hate social media. </p>
    <h2 class="social__title">Follow me nowhere</h2>
    <ul class="social__list">
        <a class="social__button1"  href="https://www.instagram.com/ibuprophoenix/">Instagram</a>
        <a class= "social__button2" href="https://github.com/Ibuprophoenix">Github</li></a></ul></section>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh; /* altura total da tela */
  display: flex;
  flex-direction: column;
  justify-content: center; /* centraliza na horizontal */
  align-items: center;     /* centraliza na vertical */
}


.social {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Montserrat, sans-serif;
    
}
.social__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Krona One', sans-serif;
    font-weight: 100;
    font-size: 15px;
}
.social__text {
    font-family: krona One, sans-serif;
    font-weight: 100;
    font-size: 15px;
}
.social__list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px; /* espaçamento entre os links */

}
.social__button1 {
    background-color: none;
    color: #03a50b;
    border: 2px solid #03a50b;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none; 
    width: 200px; /* largura do botão */
    text-align: center; /* centraliza o texto dentro do botão */
}

.social__button2 {
    background-color: none;
    color: #03a50b;
    border: 2px solid #03a50b;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none; 
    width: 200px; /* largura do botão */
    text-align: center; /* centraliza o texto dentro do botão */
# }

Algo me diz que tinha uma forma mais simples de fazer os dois botoes ficarem iguais sem precisar escrever os dois separadamente. Eu usei a tag de listas porque ela nao precisa da tag div. Será que foi so por isso que ficou tao longo o css?

1 resposta
por Mike de Sousa
| 1872.6k xp | 3539 posts
Alura Scuba Team Suporte Educacional

Olá, Isabelle, tudo bem?

Seu exercício está bem desenvolvido e demonstra boa compreensão do uso de Flexbox, organização do HTML e aplicação de classes no CSS. Sobre sua dúvida: realmente existe uma forma mais simples de estilizar ambos os botões sem repetir o código. Você pode utilizar uma única classe para os dois botões, por exemplo, criando uma classe .social__button e aplicando-a nos dois links. Assim, ambos receberão o mesmo estilo e seu CSS fica mais enxuto. Exemplo:

No HTML:

<a class="social__button" href="https://www.instagram.com/ibuprophoenix/">Instagram</a>
<a class="social__button" href="https://github.com/Ibuprophoenix">Github</a>

No CSS:

.social__button {
    background-color: none;
    color: #03a50b;
    border: 2px solid #03a50b;
    padding: 10px 25px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    width: 200px;
    text-align: center;
}

Dessa forma, qualquer ajuste feito na classe .social__button já é aplicado para os dois botões, tornando o código mais prático para manutenção. Caso precise de estilos diferentes para cada botão, pode adicionar classes extras ou utilizar seletores específicos, mas o ideal é manter o código o mais simples possível.

Quanto ao uso das tags de lista, não é obrigatório utilizar <ul> para agrupar os botões, mas é uma boa prática semântica quando se trata de uma lista de links relacionados. Só fique atenta à estrutura, pois o correto é cada <a> ficar dentro de um <li>, por exemplo:

<ul class="social__list">
    <li><a class="social__button" href="...">Instagram</a></li>
    <li><a class="social__button" href="...">Github</a></li>
</ul>

Assim, mantém a semântica HTML adequada.

Continue compartilhando seus exercícios. O fórum está à disposição para qualquer dúvida.

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