Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Praticando :hover e :active

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Finalizando nossa página e atividade Pseudo-classes

por Estudante
| 41.3k xp | 11 posts

Fiz uma animação mudando o tamanho do botão quando o mouse está em cima:

.container__botao {
    background-color: var(--botao-azul);
    border-radius: 5px;
    padding: 1em;
    color: var(--branco-principal);
    display: block;
    text-decoration: none;
    margin-bottom: 1em;
    transition: 300ms;
}

.container__botao:hover {
    transform: scale(1.1);
}

.container__botao:active {
    font-size: 18px;
    font-weight: 500;
}

Utilizei o transform para mudar a escala e também a transition para suavizar.

2 respostas
solução!
por Renan Lima
| 3697.8k xp | 7821 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Estudante.

Tudo bem?

Muito obrigado por compartilhar o seu código aqui com a gente. Esses efeitos de hover e :active são muito legais, ainda mais usando o transition que conseguimos ver o efeito em um tempo legal, fica top.

Parabéns, é muito bom ver que você está praticando e evoluindo.

Precisar de ajuda com alguma dúvida, conta com a gente. Valeu.

por Estudante
| 41.3k xp | 11 posts

Obrigado!