Loja / Botões
Efeitos de botão para site
24 efeitos de botão prontos pra colocar no seu site, em CSS e JavaScript puros. Cada um tem vídeo de prévia e kit pra baixar, com licença pra sites de clientes.
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.
Botão com um fio de luz parado embaixo: no hover, a luz sobe pelos dois lados da borda até se fechar em cima, em degradê, com um halo em volta, e escorre de volta quando o mouse sai.
Botão de vidro grosso: a borda curva o fundo como lente, um brilho segue o cursor e o aperto amassa como gelatina.
Botão de salvar em que a fita do marcador cai e se enche de cor, solta faíscas e o contador rola pro número novo. A escolha fica guardada pra próxima visita.
Botão em que a bola da seta rola até o outro lado no hover, girando como uma roda, e chega com a seta apontando pra frente; um rastro de luz fica pra trás e o texto desliza.
Botão em que a bolinha da seta cresce no hover até virar o botão inteiro; o texto muda de cor exatamente por onde a cor passa, e a seta sai por um lado enquanto outra entra pelo outro.
Botão de download que vira a própria barra de progresso: a seta mergulha, a cor enche com a porcentagem correndo e, no fim, o check se desenha. Com um link, baixa de verdade e mostra o progresso real.
Seis botões de tema claro e escuro em que o ícone se transforma: o sol vira lua, a lâmpada apaga, o sol se põe no horizonte. Todos trocam juntos e levam a página.
Seletor de tema num trilho de vidro: uma gota corre até a opção, estica com a velocidade, balança ao chegar, e o ícone debaixo dela aumenta como numa lente.
Um interruptor de claro e escuro: o tema novo se espalha pela página numa onda redonda que nasce no botão, com um anel de luz na frente.
Uma tecla física de aparelho, com luz por baixo e um LED: apertar atravessa a luz de uma cor para a outra, em ritmo constante — e ela fica acesa na cor nova.
Um botão que cobre a página inteira para trocar o tema: a cobertura desce do topo, o tema vira escondido atrás dela, e quando ela sobe o que aparece já é a página nova.
Um interruptor de dia e noite: o sol atravessa o céu, a lua escorrega por cima dele, as nuvens descem e as estrelas sobem — e a página inteira pode virar junto.
Botão de finalizar compra que tomba e um caminhão entrega o pacote.
Botão neon com anéis de pulso tipo radar; hover levanta e brilha.
Botão escuro que no hover ganha um contorno neon com bloom (dois contornos na mesma cor).
Botão neon com 4 linhas de luz correndo pelas bordas; no hover preenche com glow forte.
Botão preenchido por um gradiente multicolor que flui, com glow do mesmo gradiente atrás.
Botão de contorno onde um líquido sobe preenchendo de baixo pra cima no hover.
Botão de contorno que acende em roxo neon no hover, com texto brilhando e halo de luz.
Botão de contorno que enche de líquido no hover: blobs sobem e se fundem preenchendo o botão.
Botão com ciclo idle → loading → sucesso (checkmark que desenha).
No hover o elemento dispara estilhaços que voam pra fora — determinístico.
Botão que atrai levemente o cursor e dispara um brilho que percorre a borda.