Como ele é
Lembra uma pedra caindo num lago, só que dentro do botão. Em repouso, é um botão simples de cantos arredondados, borda de 2 pixels, fundo na cor de fundo do tema e texto na cor principal. A cada clique ou toque, um círculo azul-claro aparece exatamente onde o dedo ou o mouse tocou, cresce até passar das bordas e vai sumindo, num movimento que desacelera no fim e dura 0,6 segundo. As bordas do botão cortam a onda, e cliques rápidos criam ondas sobrepostas.
Você pode estar procurando isto se pediu algo assim
- botão que faz uma onda quando clico
- efeito de toque no botão igual aplicativo de celular
- botão com círculo que se espalha a partir do clique
- feedback visual quando a pessoa aperta o botão de enviar
- aquele efeito de clique estilo Android no meu site
- botão de formulário que mostra que o clique funcionou
Também chamado de
- onda no clique
- efeito ripple
- botão com onda
- ripple effect
- click ripple
- efeito de toque no botão
Quando usar
- Botões de enviar, salvar e confirmar em formulários
- Apps e painéis em que a pessoa precisa sentir que o clique foi registrado
- Interfaces pensadas para toque, como PWAs e versões mobile
- Ações repetidas, como adicionar ao carrinho ou curtir
Quando evitar
- Botões de destaque que precisam chamar atenção antes do clique, já que a onda só aparece depois
- Marcas com paleta própria, sem trocar o azul-claro padrão da onda
Como pedir para a sua IA
Crie um botão com efeito ripple: a cada clique ou toque, um círculo nasce no ponto exato e se espalha até sumir. Use a cor da minha marca na onda, centralize a onda quando o clique vier do teclado e desligue a animação para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Respingo
Dá para mudar a cor e a velocidade de Respingo?
Sim. Respingo tem duas propriedades: rippleColor define a cor da onda, azul-claro por padrão, e duration define a duração em milissegundos, 600 por padrão. O fundo e o texto usam as cores do tema do projeto, então o botão acompanha o modo claro e o escuro.
Respingo funciona com teclado?
Funciona como botão: Respingo usa o elemento button nativo, recebe foco e dispara o clique com Enter ou espaço. A onda, porém, nasce nas coordenadas do ponteiro, que num acionamento por teclado não apontam para o botão, então ela pode não aparecer. Vale pedir à IA para centralizar a onda nesse caso.
Respingo deixa o site lento?
Não. Respingo cria um pequeno círculo por clique, anima com CSS e o remove ao fim da duração, sem laço de animação rodando o tempo todo. Tem classificação Leve no THM Componentes. Para movimento reduzido, o prompt do THM Componentes pede uma versão estática; aqui, pode ser só uma leve mudança de cor no clique.
