Push
O elemento afunda para dentro e volta, como se fosse um botão físico sendo apertado.
Onde usar
Botões
Variações
- Push
- Icon Push
Prompt
Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.
Adicione um efeito de hover "Push" em [onde].
Toda vez que o ponteiro entrar, o elemento deve encolher uma vez rapidamente e voltar ao tamanho normal com um leve salto, como se fosse um botão físico sendo apertado.
Reproduza uma vez por hover em vez de repetir em loop, e evite que o layout ao redor se desloque.Animações parecidas
A
Clique
Press (Button Tap Scale)
Também chamada Tap feedback, Active scale, Press state
O elemento encolhe um pouco enquanto é pressionado e volta com um quique ao soltar.
Onde usar
Botões, cards
Adicione um efeito "Press (Button Tap Scale)" (também chamado tap feedback ou press state) em [onde].
Enquanto é pressionado, o elemento deve encolher um pouco e escurecer levemente, e ao soltar voltar ao tamanho normal com um pequeno quique: rápido e sutil.
Mostre o mesmo retorno no teclado e no toque, e não deixe o layout ao redor se mexer.A
Passe o mouse por cima
Ao passar o ponteiro, o elemento desce alguns pixels, como se fosse pressionado para dentro da página.
Onde usar
Botões
Adicione um efeito de hover "Sink" em [onde].
O elemento deve descer um pouco e ficar lá enquanto o ponteiro estiver sobre ele, como se fosse pressionado para dentro da página, e subir de volta quando sair: suave, sem efeito de quique.
Mova-o só visualmente, sem deslocar o layout ao redor, e mostre o mesmo efeito no foco do teclado.A
Passe o mouse por cima
Shrink
Também chamada Scale Down
O elemento diminui um pouco, de forma suave, quando o ponteiro está sobre ele.
Onde usar
Botões, blocos
Adicione um efeito de hover "Shrink" (também chamado scale down) em [onde].
O elemento deve diminuir um pouco, de forma suave, enquanto o ponteiro estiver sobre ele, e voltar ao tamanho quando sair: rápido e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.Mais em Hover
A
Passe o mouse por cima
Radial Fill
Também chamada Circle expand
Ao passar o mouse, um círculo colorido cresce a partir do centro ou encolhe em direção a ele para preencher o elemento.
Onde usar
Botões
Adicione um efeito de hover "Radial Fill" (também chamado circle expand) em [onde].
Um círculo da nova cor deve crescer suavemente a partir do centro até preencher o elemento, e encolher de volta ao centro quando o ponteiro sair, enquanto a cor do texto muda para continuar legível.
Mantenha o círculo recortado dentro da forma do elemento e o texto acima dele, e mostre o mesmo efeito no foco do teclado.A
Passe o mouse por cima
Ao passar o mouse, um retângulo se expande ou se contrai dentro do elemento para mudar o fundo.
Onde usar
Botões
Adicione um efeito de hover "Rectangle Fill" em [onde].
A nova cor de fundo deve se fechar a partir das quatro bordas conforme um retângulo interno encolhe em direção ao centro, e voltar a se abrir quando o ponteiro sair, enquanto a cor do texto muda para continuar legível: suave e rápido.
Mantenha o texto acima do preenchimento e mostre o mesmo efeito no foco do teclado.A
Passe o mouse por cima
O elemento gira alguns graus ao passar o mouse.
Onde usar
Ícones, miniaturas
Adicione um efeito de hover "Rotate" em [onde].
O elemento deve girar levemente no sentido horário enquanto o ponteiro estiver sobre ele e voltar quando sair: suave e sutil.
Evite que o layout ao redor se desloque e mostre o mesmo efeito no foco do teclado.