Então, a minha ideia do hover era:
- Mudar a cor de fundo
- Mudar a cor da fonte
- Mudar a cor do ícone
Nesse último demorei um pouco para achar a solução, mas desde início imaginei que fosse uma troca de imagem, então já adicionei duas imagens na pasta, o github-hover.png e o linkedin-hover.png, mas não fazia ideia como eu ia fazer essa troca, mas dei uma olhada nos projetos deste fórum e consegui minha solução, e foi a seguinte:
- Criei uma classe para os ícones, de nome "icone"
- Adicionei a imagem dos ícones que eu queria trocar, e coloquei a classe "icone-hover"
- No CSS, fiz um display: none com a classe "icone-hover"
- No hover dos botões, fiz a troca do display das duas classes, "icone" para none e "icone-hover" para block
Assim funcionou bonitinho! O resultado foi esse
Segue os blocos de código que eu fiz:
HTML (Apenas dos botões)
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
<a class="apresentacao__links__botao" href="https://www.linkedin.com/in/gabriel-brito-1951831bb/">
<img src="./assets/linkedin.png" alt="Ícone LinkedIn" class="icone">
<img src="./assets/linkedin-hover.png" alt="Ícone LinkedIn Hover" class="icone-hover">
LinkedIn
</a>
<a class="apresentacao__links__botao" href="https://github.com/Gabriel-Brito1/Portfolio-projetos">
<img src="./assets/github.png" alt="Ícone Github" class="icone">
<img src="./assets/github-hover.png" alt="Ícone Github Hover" class="icone-hover">
Github
</a>
</div>
CSS (Apenas dos botões)
.icone-hover {
display: none;
}
.apresentacao__links__botao:hover {
/* background-color: #272727; */
background-color: #22D4FD;
.icone-hover {
display: block;
}
.icone{
display: none;
}
color: black;
}