Componentes

fill

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

Crie com um guia Conecte seu agente Explorar modelos de páginas

36 de 46

Carregando o índice completo de busca.

Dot flood button

1632Dot flood buttonBotõesUm comprimido delineado com um pequeno ponto ao lado do rótulo; pairar aumenta o ponto até inundar todo o botão e o rótulo muda para seu gêmeo invertido.

Lift and fill pill

1713Lift and fill pillBotõesUma pílula delineada que salta uma distância fixa para cima e se enche de forma sólida com seu sotaque enquanto apontada, depois cai de volta na mesma curva.

Pincer Fill Button

1829Pincer Fill ButtonBotõesUm botão de pílula claro cujas duas cortinas translúcidas se fecham nas bordas esquerda e direita ao pairar, parando rapidamente para que uma faixa da base permaneça acesa no meio.

Sweep invert button

1837Sweep invert buttonBotõesUm botão azul marinho profundo cujo preenchimento brilhante surge da borda direita e muda a etiqueta para o tom escuro com um aperto rápido.

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.

Diagonal swipe button

1850Diagonal swipe buttonBotõesUm botão delineado segurando uma lâmina fina e inclinada que se endireita e se alarga até inundar o quadro ao pairar.

Liquid wave button

1870Liquid wave buttonBotõesUma pílula escura meio cheia de um líquido colorido cuja superfície rola em uma onda contínua e que nunca se repete.

Rising Fill Button

1879Rising Fill ButtonBotõesUm botão com borda oca que é preenchido com cor da borda inferior para cima, como um líquido subindo, quando você passa o mouse sobre ele ou foca.

Corner ticks frame button

1944Corner ticks frame buttonBotõesUm retângulo escuro marcado apenas por quatro marcas de canto que se estendem para desenhar um quadro completo, após o qual um painel iluminado se abre a partir do centro e o rótulo é invertido.

Fill sweep loading text

1959Fill sweep loading textMensagens de statusUma etiqueta de carregamento cujo contorno tênue fica sob uma cópia totalmente colorida que entra da esquerda, atinge toda a largura e drena de volta, repetindo-se enquanto algo é carregado.

Flowing gradient headline

1962Flowing gradient headlineEfeitos de textoUm título cujas letras são preenchidas por um gradiente móvel de dois tons, de modo que uma faixa brilhante flutua indefinidamente pelas palavras, com um toque suave opcional atrás.

Diagonal shutter fill button

2141Diagonal shutter fill buttonBotõesUm botão delineado que é preenchido quando duas lâminas inclinadas balançam de lados opostos, endireitam-se no meio do voo e se encontram no meio.

Italic outline fill button

2174Italic outline fill buttonBotõesUm botão de contorno silencioso definido em itálico que inverte para um preenchimento de acento sólido no momento em que um ponteiro ou teclado o alcança.

Left Edge Fill Button

2378Left Edge Fill ButtonBotõesUma placa arredondada e macia onde um painel colorido cresce na borda esquerda para preencher toda a forma ao passar o mouse, virando o rótulo à medida que ele passa.

Sweeping band button

2487Sweeping band buttonBotõesUm botão preenchido segurando uma faixa colorida com o dobro de sua largura, que desliza de ponta a ponta ao passar o mouse para que o preenchimento pareça estar viajando.

Letter spread drop button

2511Letter spread drop buttonBotõesUma pílula pálida cujas letras se separam à medida que se enche com uma cor de destaque e uma poça macia floresce abaixo dela, e então cai nessa poça enquanto é segurada.

Diagonal blob flood button

2538Diagonal blob flood buttonBotõesUm botão contornado inundado por uma grande bolha arredondada que desliza diagonalmente a partir do canto superior e escurece enquanto é pressionado.

Soft bloom fill button

2546Soft bloom fill buttonBotõesUma pílula iluminada por dentro por um ponto borrado que incha lentamente de um canto até preencher todo o rosto.

Jello squash button

2556Jello squash buttonBotõesUm botão delineado que inunda de cor ao passar o mouse e oscila em uma sequência de compressão e alongamento antes de se estabilizar.

Pass through wipe button

2558Pass through wipe buttonBotõesUm botão preenchido cujo painel brilhante aparece de uma borda ao passar o mouse e sai pela borda oposta quando você avança, para que continue viajando.

Sliding fill send pill

2564Sliding fill send pillBotõesUm comprimido de contorno largo com um disco sólido numa das extremidades; deslizando slides que preenchem toda a pílula e vira o rótulo à medida que passa.

Hold to fill pad

2570Hold to fill padBotõesUm bloco translúcido que preenche para cima a partir de sua base enquanto é segurado e, em seguida, confirma e pisca sua borda quando o preenchimento atinge o topo.

Draining fill button

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.

Detached Ring Pill

2595Detached Ring PillBotõesUma pílula escura orbitada por um anel de contorno flutuante que se estende ainda mais e inunda a pílula com cor ao pairar.

Edge wipe invert

2597Edge wipe invertBotõesUm botão contornado cujo preenchimento sólido se estende a partir de uma borda e inverte o rótulo à medida que passa por baixo.

Fusing blob fill button

2623Fusing blob fill buttonBotõesUm botão de contorno grosso que é preenchido ao passar o mouse à medida que bolhas de líquido sobem de baixo e se fundem em uma superfície oscilante.

Diagonal orb fill button

2626Diagonal orb fill buttonBotõesUm círculo enorme desliza de canto a canto em um botão delineado, preenchendo-o na diagonal e escurece no instante em que você o pressiona.

Leap and tint button

2631Leap and tint buttonBotõesUma pílula pálida que salta para cima ao pairar ou focar enquanto seu preenchimento se transforma em sotaque e sua sombra neutra floresce em uma grande piscina colorida no mesmo tom.

Relay fill button

2652Relay fill buttonBotõesUm botão semi-arredondado que é preenchido ao passar o mouse por meio de um revezamento de duas barras de corrida que sobem até a altura total antes que o rótulo mude de cor.

Ink bloom button

2662Ink bloom buttonBotõesUm botão com contorno pesado cujo tom translúcido é superado por um disco sólido de destaque que surge do centro ao passar o mouse ou ao focar no teclado.

Spinning square flood button

2665Spinning square flood buttonBotõesUm botão delineado que inunda com seu sotaque enquanto um quadrado arredondado giratório desliza a partir do canto, de modo que o preenchimento chega atrás de uma borda ondulada e ondulada.

Diagonal wedge button

2676Diagonal wedge buttonBotõesUm botão quadrado preenchido por uma cunha triangular que cresce ao longo da diagonal até cobrir toda a face.

Interlocking comb button

2678Interlocking comb buttonBotõesDois pentes de barras verticais deslizam de cima para baixo e se unem para preencher o botão, invertendo o rótulo à medida que passam.

Arrow wipe button

2683Arrow wipe buttonBotõesUm botão de pílula cuja placa de destaque, cortada em forma de ponta de seta, desliza da esquerda para a esquerda e inverte o rótulo letra por letra à medida que sua ponta se cruza.

Converging chevron button

2684Converging chevron buttonBotõesDuas placas em forma de seta voam de lados opostos e se encontram no meio do botão, fechando-o atrás da etiqueta.

Rising Circle Fill

2723Rising Circle FillBotõesUma pílula delineada que é preenchida ao passar o mouse enquanto um grande círculo de destaque surge abaixo de sua borda enquanto o rastreamento do rótulo se alarga.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

Arrow wipe button
Um botão de pílula cuja placa de destaque, cortada em forma de ponta de seta, desliza da esquerda para a esquerda e inverte o rótulo letra por letra à medida que sua ponta se cruza.
Center out fill button
Um 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.
Converging chevron button
Duas placas em forma de seta voam de lados opostos e se encontram no meio do botão, fechando-o atrás da etiqueta.

Orientações de design

Abrir o índice completo

Etiquetas

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)billing (10)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (7)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (13)finance (10)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (50)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)log (3)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)product (6)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (21)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)workflow (18)workspace (36)wrapper (3)zoom (4)