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

Hover utilizado

Utilizei o "tansition: 2s;" que da um efeito bacana de mudança gradual.

.apresentacao__links__link{ background-color: #0093E9; background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); width: 378px; text-align: center; border-radius: 8px; font-size:24px; font-weight:600px; padding: 21.5px 0; color: black; font-family: 'Montserrat', sans-serif; text-decoration: none; box-shadow: 15px 10px 10px teal; border: 2px solid cyan; display:flex; justify-content: center; gap: 16px; padding-left: 10px; }

.apresentacao__links__link:hover{ background-color: rgb(36, 129, 166); background-image: linear-gradient(160deg, #80D0C7 0%,#0093E9 100%); width: 378px; text-align: center; border: 2px solid cyan; border-radius: 8px; font-size:24px; font-weight:600px; padding: 21.5px 0; color: white; text-shadow: 0 0 15px rgba(255,255,255,.5), 0 0 10px rgba(255,255,255,.5); font-family: 'Montserrat', sans-serif; font-size: 24px; text-decoration: none; box-shadow: none; transition: 1.5s; }

2 respostas
solução!

Oii, Juan! Tudo bem?

Obrigada por compartilhar conosco o que você fez. Pessoalmente eu adoro o comando de transição também. Inclusive, você conhece o comando :not()? Quando você coloca algum elemento dentro dele (como o de transição), ele reverte o que está acontecendo. Ou seja, se demora x tempo pra fazer uma transição, ao sair com o mouse pelo hover, ele demora também esse tempo na parte da retirada!

Aqui está a documentação caso te interesse:

E se alguma dúvida surgir, estamos disponíveis aqui no fórum.

Abraços e bons estudos!

Consegui colocando:

.apresentacao__links__link:not(:hover){
    transition: 1s;
    }     

Ficou bem legal!!