Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Meus Botões estão com um fundo que não encontro onde

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox

por Shirley Regina Roque
| 43.7k xp | 38 posts
Enfermeira

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

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


*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #081421;
    height: 100vh;
    box-sizing: border-box;
}

.principal{
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff
    ;
}

.principal__conteudo{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.principal__conteudo__titulo{
    font-size: 36px;
    font-family: "Krona One", sans-serif;
}
.principal__conteudo__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

.principal__links{
    display: flex;
    justify-content: space-between;
    margin: 25px;
}

.principal__estilo__link{
    background-color: #22D4FD;
    width: 400px;
    height: 79px ;
    text-align: center;
    color: black;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 30px;
    text-decoration: none;
    font-family:"Montserrat", sans-serif;
}

.texto-destaque{
    color: #22D4FD;

<main class = "principal">
    <section class="principal__conteudo">
        <h1 class="principal__conteudo__titulo">Eleve seu negócio digital a outro nível 
        <span class="texto-destaque">um front-end de qualidade </span> </h1>
        <p class="principal__conteudo__texto">Meu nome é Shirley Roque, estou iniciando na carreira de Desenvimento front-end, venha conferir alguns dos meus projetos!</p>
        <div class="principal__links">
            <button>
                <a class="principal__estilo__link" href="//github.com/roqueshirley"">Github</a>
            </button>
            <button>
                <a class="principal__estilo__link" href="">Instagram</a>
            </button>
        </div>
    </section>
    <div class="Imagem">
        <img src="imagens/Imagem.png" alt="Desenvovedora em frente ao computador">
    </div>
</main>
![]() 
                                        ![Insira aqui a descrição dessa imagem para ajudar na acessibilidade](https://cdn1.gnarususercontent.com.br/1/1262667/1d679d36-c26f-4414-bbe5-418aaa84527c.png)
1 resposta
solução!
por Mike de Sousa
| 685.1k xp | 1027 posts
Alura Scuba Team Suporte Educacional

Olá, Shirley, tudo bem com você?

O que acontece é que como as tags <a> estão dentro das tags <button>, elas não conseguem ocupar 100% do espaço disponível e isso faz as bordas do <button> aparecerem na tela. As tags <button> normalmente são usadas para interação do usuário com a página, como por exemplo, enviar um formulário, ou acionar alguma ação ou uma função específica, diferente das tags <a> que são usadas como âncoras para outras páginas ou documentos.

Então nesse projeto, como a ideia é criar dois botões que levem os usuário para as suas redes sociais, somente a tag <a> é suficiente, você pode escrever o código da seguinte forma:

Aqui eu removi as tags <button>, deixando somente as tags <a>.

      <div class="principal__links">
        <a class="principal__estilo__link" href="#">Github</a>
        <a class="principal__estilo__link" href="#">Instagram</a>
      </div>

Aqui eu removi a margin que havia na classe .principal__links, e ajustei o padding e o width da classe .principal__estilo__link, e também removi o height.

.principal__links{
    display: flex;
    justify-content: space-between;
}


.principal__estilo__link{
    background-color: #22D4FD;
    width: 280px;
    text-align: center;
    color: black;
    padding: 21.5px 0;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    font-family:"Montserrat", sans-serif;
}

E esse foi o resultado.

Portfólio de uma desenvolvedora front-end, com botões para o GitHub e o Instagram

Espero ter ajudado! Qualquer outra dúvida, o fórum está aqui para você.

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado