1 - Organizando ícones nas redes sociais
HTML:
<a class = "apresentacao__links__link" href = "https://github.com/Victor-M-S-Rodrigues07">
<img src = "Assets-aula2-curso3-html-e-css-main/assets/github.png" alt = "Ícone do GitHub">
GitHub
</a>
<a class = "apresentacao__links__link" href = "https://www.linkedin.com/in/victor-m-rodrigues/">
<img src = "Assets-aula2-curso3-html-e-css-main/assets/linkedin.png" alt = "Ícone do LinkedIn">
LinkedIn
</a>
<a class = "apresentacao__links__link" href = "https://twitch.tv/guilimadev">
<img src = "Assets-aula2-curso3-html-e-css-main/assets/twitch.png" alt = "Ícone da Twitch">
Twitch
</a>
2 - Centralizando ícones e textos nos botões
CSS:
.apresentacao__links__link {
width: 378px;
text-align: center;
padding: 16px 0px;
border: 2px solid #22D4FD;
border-radius: 8px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 24px;
text-decoration: none;
color: #F6F6F6;
display: flex;
justify-content: center;
}
3 - Espaçamento entre ícones e textos
CSS:
.apresentacao__links__link {
width: 378px;
text-align: center;
padding: 16px 0px;
border: 2px solid #22D4FD;
border-radius: 8px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 24px;
text-decoration: none;
color: #F6F6F6;
display: flex;
justify-content: center;
gap: 16px;
align-items: center;
}
4 - Personalizando o efeito Hover
CSS:
.apresentacao__links__link:hover {
border: solid 2px #0000FF;
}
Projeto:
5 - Alterando o cursor e o fundo dos botões
CSS:
.apresentacao__links__link:hover {
background-color: #272727;
cursor: pointer;
}
Projeto:
Obs: Não sabia do "Pointer", o meu já vira pointer automaticamente.