Feixe na Borda Plus

Uma luz corre pela borda de um card, botão ou imagem, contornando os cantos, sem parar.

Sobre este efeito

Uma luz corre pela borda de um card, botão ou imagem, contornando os cantos, sem parar. A borda é um anel fino recortado por máscara; dentro dele, uma mancha de luz anda pelo caminho do contorno em loop, e o conteúdo não é tocado. Card de plano em destaque, botão principal, moldura de imagem. Uma ou mais luzes na volta, só no hover, sentido, cor, segunda cor no rastro, tamanho da mancha, espessura, tempo da volta e intensidade. Sem biblioteca: animação CSS em offset-distance; o JS escreve o caminho com os cantos do próprio elemento.

Ficha

Categoria: Luzes
Onde combina: recursos, chamada pra ação, prova social
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: 3,3 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 15% do processador de um celular intermediário enquanto anima.
Na loja desde: 04/09/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-feixe-na-borda.

Assuntos

luzes
borda
feixe
beam
glow
card
botao
destaque
loop
css-puro