04 Estilizando os botões-Dificuldade resolvida- botão em cima do texto

1
resposta

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Manipulando botões e atividade Estilizando os botões

por Helena Rodrigues Fernandes Marcomini

| 3.7k xp | 11 posts

Tive dificuldade no projeto, antes de corrigi-lo, estava assim:

.apresentacao_links_link {
   background-color: aqua;
   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;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Após a correção, inclui:

.apresentacao_links {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.apresentacao_links_link {
   background-color: aqua;
   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;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

por Rafaela Petelin Silvério

| 1773.6k xp | 4059 posts

Alura Scuba Team

2 semanas atrás

Oi, Helena! Como vai?

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

Vale destacar como a separação entre .apresentacao_links e .apresentacao_links_link deixou o layout mais organizado. O uso de display: flex resolveu bem a questão do botão ficar em cima do texto, mostrando um bom entendimento de Flexbox e da responsabilidade de cada classe no CSS.

Uma dica interessante para o futuro é usar justify-content para controlar o alinhamento dos botões dentro do container flex. Veja este exemplo:


.apresentacao_links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

Esse código centraliza os links horizontalmente e mantém o espaçamento entre eles, ajudando no controle visual do layout.

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

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema