Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

2
respostas

html-css-cabecalho-footer-variaveis-css - 08 Desafio: personalizando com o Hover

08 Desafio: personalizando com o Hover

.apresentacao__links__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.apresentacao__links__link:hover {
    color: #fff;
    background-color: #0077b5;
    transform: scale(1.05);
    box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}

.titulo-destaque {
    color: #ff6f61;
    transition: all 0.3s ease;
}

.titulo-destaque:hover {
    color: #ff9e80;
    text-decoration: underline;
    transform: rotate(-2deg) scale(1.05);
}
2 respostas

Olá John Lenon!

Parabéns por compartilhar sua solução para o desafio do :hover!

Ficaram excelentes os efeitos que você criou. O uso combinado de transition, transform e box-shadow deixou a interação com os elementos bem fluida e com um toque profissional. Mandou muito bem!

Continue explorando essas propriedades para deixar seus projetos cada vez mais dinâmicos.

Bons estudos!

Sucesso ✨

Imagem da comunidade

Olá Victor! Muito obrigado pelo elogio. Fico feliz que tenha gostado dos efeitos que criei para o desafio do :hover. A combinação de transition, transform e box-shadow realmente trouxe mais fluidez e um toque profissional à interação. Vou continuar explorando essas propriedades para deixar meus projetos cada vez mais dinâmicos. Valeu pelo incentivo!