HTML:
html
Copiar
Editar
<div class="social-links">
<a href="https://www.instagram.com/seuusuario" target="_blank">Instagram</a>
<a href="https://www.linkedin.com/in/seuusuario" target="_blank">LinkedIn</a>
</div>
CSS:
css
Copiar
Editar
/* Estilo base para os links */
.social-links a {
text-decoration: none; /* Remove o sublinhado */
color: #333; /* Cor padrão do texto */
font-size: 18px; /* Tamanho da fonte */
padding: 8px 12px; /* Espaçamento ao redor do texto */
border-radius: 4px; /* Bordas arredondadas */
transition: all 0.3s ease-in-out; /* Suaviza as transições */
}
/* Estilo no hover */
.social-links a:hover {
color: #ffffff; /* Cor do texto muda para branco */
background-color: #0077b6; /* Fundo muda para azul */
font-size: 20px; /* Aumenta levemente o tamanho da fonte */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona uma leve sombra */
}
Explicação:
Transição suave: A propriedade transition aplicada no estilo base dos links cria uma animação quando o hover é ativado, deixando o efeito mais fluido.
Mudança de cor e fundo: No estado :hover, o texto fica branco, e o fundo muda para azul.
Tamanho da fonte: Aumentar levemente o texto no hover ajuda a destacar o link.
Sombra: O box-shadow dá um efeito de destaque ao link.
