Painel que Brota do Botão Plus

Sobre este efeito

Um painel que abre do ponto onde você clicou. A tinta nasce no centro do botão e cresce até tomar a tela, um véu sobe junto no mesmo ritmo, e o cartão chega ANTES de a cor terminar: é essa defasagem que faz a coisa parecer uma transição e não duas animações soltas. Fechar é o caminho de volta, com a tinta recolhendo para o mesmo ponto de onde saiu. É uma janela de verdade: o foco entra no cartão e fica nele no Tab, fecha com Esc ou clicando fora, o foco volta para o botão e a página atrás fica parada. A borda macia é um degradê parado dentro do disco, sem filtro rodando, então cada abertura é leve, e parado não gasta nada. Com menos movimento o painel abre e fecha igual, mas sem animação e sem a tinta em cena. No toque funciona em celular e tablet, com o cartão cabendo inteiro. Sem JavaScript o painel fica sendo um bloco comum na página, sem sumir conteúdo. Cor da tinta, cor e força do véu, tempo, tamanho da gota, maciez da borda e largura do cartão ajustáveis.

Ficha

Categoria

Interação

Onde combina

transições, utilitário

Alcance

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

Plano

Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).

Peso

6,6 KB de código comprimido. Sem biblioteca externa.

No celular

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

Na loja desde

16/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-painel-que-brota-do-botao.

Assuntos

• painel
• dialogo
• modal
• transicao
• acessivel
• teclado
• botao