Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Lista de exercícios

Eu troquei as cores para ficar mais ok com o meu projeto e também adicionei uma transição, para dá mais vida ali na hora de passar o mouse nos icones.

Ref: https://developer.mozilla.org/pt-BR/docs/Web/CSS/transition

.css

.apresentacao__links__link{
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 3px solid #D34B2B;
    width: 380px;
    text-align: center;
    border-radius: 10px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #f6f6f6;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.apresentacao__links__link:hover{
    background-color: #D34B2B;
    color: #000000;    
    transform: scale(1.05);
}

.html

                <a class="apresentacao__links__link" href="https://github.com/agenciadigitalslz">
                    <i class="fi fi-brands-github"></i>
                    Github
                </a>
                <a class="apresentacao__links__link" href="https://github.com/in/andre7lopes">
                    <i class="fi fi-brands-linkedin"></i>
                    Likedin
                </a>
                <a class="apresentacao__links__link" href="https://instagram.com/agenciadigitalslz">
                    <i class="fi fi-brands-instagram"></i>
                    Instagram
                </a>
2 respostas
solução!

Oi André, tudo bem? 😊

Excelente iniciativa em personalizar as cores e adicionar transições! 👍

A transição transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; está bem implementada, criando um efeito suave ao passar o mouse.

O uso de transform: scale(1.05); no :hover também adiciona um toque interessante, dando a sensação de que o elemento está "saltando" um pouco. 👏

Se você quiser explorar mais, pode experimentar diferentes valores para transition-timing-function, como linear, ease-in, ease-out ou ease-in-out, para ver como a animação se comporta.

Você também pode adicionar transições em outras propriedades, como box-shadow ou border-color, para criar efeitos ainda mais personalizados.

🎓 Para saber mais:

Continue praticando e explorando as possibilidades do CSS! 🤔

Opa, eu vou testar, vlw pelas dicas