Ações em Órbita Ultra

Sobre este efeito

Um botão redondo que, clicado, gira o "+" em "x" e solta as ações em volta dele numa roda: cada uma sai do centro numa mola, uma depois da outra, e mostra o nome num balão quando o mouse ou o foco passa nela. Clicar numa ação faz o que o seu botão já faz e fecha a roda; clicar fora ou no botão fecha. No celular, tocar abre, tocar numa ação escolhe e tocar fora fecha. No teclado, Enter abre e leva o foco pra primeira ação, as setas andam de ação em ação, Enter escolhe e Esc fecha e devolve o foco pro botão; as teclas valem só dentro do menu. O balão do nome vai sempre pra fora da roda, e perto da borda da tela a roda vira um leque virado pro lado que tem espaço. Clicar de novo no meio da abertura inverte o movimento de onde ele está, sem pulo. Com menos movimento as ações aparecem no lugar, só esmaecendo. Tamanho da roda, mola, espera entre ações, giro, cores e camada escura ajustáveis.

Ficha

Categoria

Menu

Onde combina

menu/navegação, recursos

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

8,1 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 13% do processador de um celular intermediário enquanto anima.

Na loja desde

18/09/2026

Como colocar no seu site

1. 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.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-acoes-em-orbita.

Assuntos

• menu
• roda
• radial
• botao
• acoes
• mola
• leque
• teclado