Botões

Draining fill button

Um botão inundado que sai de uma das bordas ao passar o mouse, deixando um contorno vazio com o rótulo virado para o destaque.

Como usar Draining fill button

Um botão inundado que sai de uma das bordas ao passar o mouse, deixando um contorno vazio com o rótulo virado para o destaque.

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, direction, drainMs

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, a instalação e o painel de propriedades estão incluídos no Fieldbook Pro. A prévia interativa está aberta para todos.

Conecte seu agente

Componentes relacionados

2588Draining fill buttonBotõesUma pílula delineada que começa totalmente inundada de cor e escorre para uma faixa fina na base ao pairar, depois é recarregada na parte inferior ao sair.

1869Light sweep buttonBotõesUm botão de contorno iluminado cuja borda brilhante envia uma faixa estreita de luz ao passar o mouse.

2615Sealing frame buttonBotõesUm apelo à ação delineado em quadrado cuja fronteira é interrompida por três lacunas em repouso; pairar fecha a moldura à medida que o preenchimento se inverte.

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.

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.

2314Charge Up Action ButtonBotõesUma pílula de carvão que se ilumina em uma tonalidade gradiente saturada ao pairar, levantando-se da superfície enquanto sua marca gira e brilha.