Botões

Tracing edge button

Um botão sólido onde quatro linhas finas começam em cantos opostos e desenham todo o perímetro ao passar o mouse, encontrando-se exatamente quando o contorno se fecha.

Como usar Tracing edge button

Um botão sólido onde quatro linhas finas começam em cantos opostos e desenham todo o perímetro ao passar o mouse, encontrando-se exatamente quando o contorno se fecha.

Teste a prévia com o mouse e o teclado. Verifique o foco visível e o layout em telas estreitas na sua página. Informe o número ou o identificador do componente ao seu agente de programação.

Propriedades: label, accent, traceMs, cornerRadius

Quais frameworks estão disponíveis?

O catálogo inclui estas versões: react, vue, svelte, astro, html. A prévia desta página usa React.

Como acessar a implementação?

O código, as versões e os comandos de instalação estão disponíveis no painel acima.

Conecte seu agente

Componentes relacionados

Border trace button

2709Border trace buttonBotõesUm botão silencioso e translúcido cujas quatro bordas se desenham em sequência ao passar o mouse enquanto uma faixa suave de luz atravessa o rosto.

Hairline trace submit

2647Hairline trace submitBotõesUm botão de envio escuro cuja linha fina de um pixel acende, traçando o perímetro a partir da borda que o ponteiro inseriu e, em seguida, recua da mesma maneira.

Perimeter draw button

2484Perimeter draw buttonBotõesUma barra curta e grossa estacionada sob a etiqueta se estende e percorre todos os quatro lados ao pairar até fechar em um contorno completo e, em seguida, retrai de volta para a barra quando sai.

Center out fill button

1848Center out fill buttonBotõesUm botão maiúsculo delineado cujo preenchimento de destaque abre a partir de uma linha fina no centro até ambas as bordas ao passar o mouse ou focar.

Clamp jaws glow button

2598Clamp jaws glow buttonBotõesUm botão com contorno vazio cujas marcas laterais deslizam para dentro, se fundem em mandíbulas e fecham sobre o rótulo com um brilho acentuado ao passar o mouse ou focar.

Corner bracket frame button

2596Corner bracket frame buttonBotõesUma etiqueta em maiúscula que é encaixada por dois colchetes em forma de L que deslizam de lados opostos e crescem para fechar a moldura.