Download que se Enche Plus

Sobre este efeito

Um botão de download que vira a própria barra de progresso. No clique, a seta mergulha na bandeja e o texto sobe pra dar lugar à porcentagem; a cor enche o botão da esquerda pra direita, com listras correndo por dentro e uma luz na ponta, e ao lado corre quanto já veio do total ("14 MB de 24 MB"). No fim, o botão fica verde, o check se desenha e um pulso sai em volta, e depois de uns segundos ele volta ao começo. Se falhar, treme, fica vermelho e oferece tentar de novo. Com um link de arquivo, o botão baixa de verdade e mostra o progresso real, lendo o arquivo aos pedaços; sem link, simula um download com ritmo de verdade, e o seu sistema pode comandar a barra por código. O botão nunca muda de largura, avisa o leitor de tela do andamento e funciona no teclado. Cores de progresso, pronto e erro, altura, listras, luz e velocidade ajustáveis. CSS e JavaScript puros, sem biblioteca.

Ficha

Categoria

Botões

Onde combina

chamada pra ação, 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

7,5 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

30/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-download-que-se-enche.

Assuntos

• download
• baixar
• botão
• button
• progresso
• progress
• barra de progresso
• loading
• carregando
• check
• sucesso
• erro