Icon Spin
Um ícone dentro de um botão gira quando o mouse passa sobre o botão.
Onde usar
Botões de ícone
Variações
- Icon Spin
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 "Icon Spin" em [onde].
O ícone dentro do elemento deve dar uma volta completa com suavidade quando o ponteiro entrar, e girar de volta quando sair.
Gire só o ícone, não o botão inteiro, e mostre o mesmo efeito no foco do teclado.Animações parecidas
Spin
Também chamada Rotate Loop, Spinner
O elemento gira continuamente em velocidade constante.
Onde usar
Indicadores de carregamento (spinners)
Adicione um efeito "Spin" (também chamado spinner ou rotate loop) em [onde].
O elemento deve girar continuamente em uma velocidade constante e uniforme, sem easing entre as voltas.
Deixe o loop contínuo, dê ao spinner um rótulo de carregamento acessível, e desacelere ou pare se o usuário preferir movimento reduzido (prefers-reduced-motion).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.A
Passe o mouse por cima
Ao passar o mouse, um ícone cai para fora da vista e volta por cima.
Onde usar
Botões de ícone
Adicione um efeito de hover "Icon Drop" em [onde].
O ícone dentro do elemento deve cair para baixo até sumir e depois voltar ao lugar vindo de cima: rápido, com uma aterrissagem suave.
Reproduza uma vez a cada entrada do ponteiro, sem loop, e mantenha o texto e o tamanho do botão inalterados.Mais em Hover
AA
Passe o mouse por cima
Ao passar o mouse, o texto do botão desliza para fora e uma seta e um preenchimento se expandem.
Onde usar
Botões de CTA
Adicione um efeito "Interactive Hover Button" em [onde].
O pequeno ponto ao lado do texto deve se expandir até preencher o botão enquanto o texto desliza para o lado e some, e o texto com uma seta entra deslizando sobre o novo preenchimento: suave e rápido.
Mantenha o tamanho do botão fixo e o texto legível o tempo todo, e mostre o mesmo efeito no foco do teclado.Passe o mouse por cima
Nudge Forward / Backward
Também chamada Arrow nudge
Ao passar o mouse, uma seta ou o próprio elemento desliza alguns pixels para a frente ou para trás.
Onde usar
Links de próximo/anterior, setas
Adicione um efeito de hover "Nudge Forward / Backward" (também chamado arrow nudge) em [onde].
A seta deve deslizar um pouco na direção para a qual aponta enquanto o ponteiro estiver sobre o elemento, e voltar quando ele sair: rápido e curto.
Mova só a seta, sem deslocar o texto nem o layout, e mostre o mesmo efeito no foco do teclado.A
Passe o mouse por cima
Ao passar o mouse, um contorno cresce para fora do elemento ou encolhe em direção a ele.
Onde usar
Botões
Adicione um efeito de hover "Outline Expand" em [onde].
Um contorno deve começar rente à borda do elemento e se afastar até deixar um pequeno espaço ao redor, ficar assim durante o hover e voltar a se fechar quando o ponteiro sair: suave e rápido.
Desenhe o contorno de forma que ele não mude o tamanho do elemento nem empurre o conteúdo ao redor, e mostre o mesmo efeito no foco do teclado.