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!