Entrar Ainda não tem acesso?
3
respostas

[Dúvida] Por que o botão continua "Colorido"?

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Preparando o layout do projeto e atividade Estilizando os links

por Grazieli Candido
| 46.1k xp | 8 posts
Aprendiz de T.I

Alguém pode me ajudar? Já tirei o background mas não fica na cor do fundo Código: 

.apresentacao__conteudo__botao1 {
    display: flex;
    width: 300px;
    padding: 16 32px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: 8px;
    border: 2px solid #22D4FD;
    
}
.apresentacao__conteudo__botao2 {
    display: flex;
    width: 300px;
    padding: 16 32px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: 8px;
    border: 2px solid #22D4FD;
    
}
.instagram {
    padding: 21.5px 0;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 22px;
    color: black;
}
.github {
    padding: 21.5px 0;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    font-size: 22px;
    color: black;
}

Imagem

3 respostas
por Renan Lima
| 3736.6k xp | 7912 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Grazieli, tudo bem?

Creio que essa cor cinza seja já a cor padrão, como se não tivesse nenhuma cor associada a ele, agora esse azul em volta é a borda do botão que está sendo declarada da seguinte forma: border: 2px solid #22D4FD; na classe .apresentacao__conteudo__botao1 e na classe .apresentacao__conteudo__botao2 só remover essa linha da borda doas duas classes no CSS.

Se não for isso, compartilha o seu código HTML completo também.

Espero ter ajudado e bons estudos!

por Grazieli Candido
| 46.1k xp | 8 posts
Aprendiz de T.I

Tudo sim e você? Então, a intenção é ficar igual essa foto aqui mas faço todos os passos e o botão ainda fica branco.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeMeu código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="destaque-titulo"> com um Front-end para aprimorar seu negócio!</strong> </h1>
            <p class="apresentacao__conteudo__texto"> Olá! Sou Grazieli Candido, desenvolvedora Front-end com especialidade em HTML, CSS e JS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="apresentacao__conteudo__links">
                <h2 class="apresentacao__conteudo__subtitulo"> Acesse minhas redes:</h2>
                <button class="apresentacao__conteudo__botao1">
                    <a class= "github" href="https://github.com/grazicandido">Github</a>
                 </button>
                 <button class="apresentacao__conteudo__botao2">
                 <a class= "instagram" href="https://instagram.com/grazicandido_">Instagram</a> 
                </button>
            </div>
        </section>
        <img src="fotograzi.jpeg" alt="Foto de perfil da Grazi" width="400px" height="470px">
    </main>
    <footer></footer>
</body>
</html>
por Renan Lima
| 3736.6k xp | 7912 posts
Alura Scuba Team Apoio Educacional - Alura

Então, você pode adicionar um background transparente nos botões, isso vai forçar eles ficarem sem fundo. Você pode adicionar um background: transparent; nas classes do botão .apresentacao__conteudo__botao1e na .apresentacao__conteudo__botao2. uma dica, se você reparar essas duas classes elas tem o mesmo conteúdo tudo indêntico, o ideal seria você criar uma classe só com esses atributos e colocar ela nos dois botões tipo classe apresentacao__conteudo__botoes, Veja:

CSS:

.apresentacao__conteudo__botoes {
    display: flex;
    width: 300px;
    padding: 16 32px;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: 8px;
    border: 2px solid #22D4FD;
    background: transparent;
}

E aplicar nos dois botões:

HTML:

<div class="apresentacao__conteudo__links">
                <h2 class="apresentacao__conteudo__subtitulo"> Acesse minhas redes:</h2>
                <button class="apresentacao__conteudo__botoes">
                    <a class="github" href="https://github.com/grazicandido">Github</a>
                 </button>
                 <button class="apresentacao__conteudo__botoes">
                 <a class="instagram" href="https://instagram.com/grazicandido_">Instagram</a> 
                </button>
            </div>