Chave Elástica Ultra

Uma chave liga-desliga com a bolinha de borracha: estica quando sai, encolhe quando chega, muda de cor no caminho e acende um halo no trilho. Dá pra clicar, arrastar ou usar o teclado.

Ver na loja e baixar

Sobre este efeito

Uma chave liga-desliga em que a bolinha se comporta como borracha: a beirada da frente sai primeiro, a de trás vem atrás e ela chega do outro lado com um pequeno rebote, mudando de cor no caminho. O trilho pega a cor de destaque e solta um halo em volta. Apertada, a bolinha alarga antes de sair, e dá pra arrastar: ela segue o dedo e a chave fica do lado em que você soltar. Por baixo é uma caixa de seleção de verdade, então funciona em formulário, com o teclado e com leitor de tela, e avisa a mudança pelo evento de sempre. O efeito é só CSS, num elemento só; o JavaScript é opcional e acrescenta o arrasto. Sem laço: só trabalha durante a troca. Tamanho, cores, canto, o quanto estica, halo e tempo ajustáveis.

Ficha

Categoria: Botões
Onde combina: utilitário, menu/navegação
Alcance: Área: vive dentro de um bloco da página.
Plano: Exclusivo de quem assina o Ultra (R$ 39,90/mês).
Na loja desde: 06/10/2026

Como colocar no seu site

Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-chave-elastica.

Assuntos

chave
interruptor
switch
toggle
alternador
liga desliga
elástico
mola
halo
formulário
acessível
teclado