Composants

invert

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

26 sur 26

Focus halo button

1696Focus halo buttonBoutonsUn bouton solide qui s'inverse en un contour lors du survol du pointeur et fait croître deux anneaux translucides empilés au moment où il prend le focus du clavier.

Rotating face plate

1742Rotating face plateBoutonsUn bouton dont la plaque sombre étiquetée tourne un coin et grandit lorsqu'elle est activée, exposant la dalle d'accent située en dessous sous la forme de quatre triangles, puis rétrécit et échange les couleurs avec elle lorsqu'elle est enfoncée.

Sweep invert button

1837Sweep invert buttonBoutonsUn bouton bleu marine profond dont le remplissage brillant s'étend du bord droit et fait passer l'étiquette au ton sombre d'une simple pression.

Color swap play button

1849Color swap play buttonBoutonsUne pilule de jeu en majuscules qui échange ses couleurs de fond et de texte en survol, se soulevant à mesure que sa lueur colorée s'assombrit.

Outline invert button

1872Outline invert buttonBoutonsUn bouton en ardoise sombre entouré d'un contour chaleureux qui échange toutes les couleurs avec sa bordure en survol et s'élève sur une lueur changeante.

Invert Fill Button

1984Invert Fill ButtonBoutonsUn petit bouton avec un contour qui se remplit au survol tandis que son étiquette passe à la valeur opposée, échangeant proprement le premier plan et l'arrière-plan.

Italic outline fill button

2174Italic outline fill buttonBoutonsUn bouton au contour discret, en italique, qui s'inverse en un accent solide dès qu'un pointeur ou un clavier l'atteint.

Left Edge Fill Button

2378Left Edge Fill ButtonBoutonsUne dalle arrondie et douce où un panneau coloré pousse à partir du bord gauche pour remplir toute la forme au survol, retournant l'étiquette au fur et à mesure de son passage.

Offset outline stack

2392Offset outline stackBoutonsUne face de bouton bordée reposant sur des calques de contour étagés comme un petit bloc de papier ; le survol fait glisser la feuille supérieure sur la pile et inverse son remplissage.

Expanding disc mute toggle

2520Expanding disc mute toggleBoutonsUne icône ronde bascule où un disque sombre se développe à partir du centre pour avaler le visage pastel, retournant le glyphe à la lumière lorsqu'il passe en dessous.

Invert on hover pill

2528Invert on hover pillBoutonsUne pilule remplie qui échange les couleurs de remplissage et d'étiquette et gonfle légèrement au survol ou au clavier, se pressant en dessous de sa taille de repos lorsqu'elle est pressée.

Nudge arrow invert button

2530Nudge arrow invert buttonBoutonsUne pilule majuscule sombre avec une flèche épinglée sur son bord droit ; le survol l'inverse en une surface pâle et pousse la flèche vers l'avant, et appuyer sur fait clignoter un remplissage chaud.

Comb wipe invert button

2542Comb wipe invert buttonBoutonsDeux peignes rayés imbriqués glissent par le haut et par le bas pour recouvrir une pilule noire, inversant l'étiquette au fur et à mesure de leur passage.

Edge wipe invert

2597Edge wipe invertBoutonsUn bouton avec contour dont le remplissage uni s'efface à partir d'un bord et inverse l'étiquette lorsqu'elle passe en dessous.

Light pool button

2612Light pool buttonBoutonsUn bouton de signe de tube allumé qui répand une piscine floue de sa propre couleur sur la surface située en dessous et échange la figure contre le sol lorsqu'il est survolé ou focalisé.

Sealing frame button

2615Sealing frame buttonBoutonsUn appel à l'action au contour carré dont la frontière est brisée par trois espaces au repos ; le vol stationnaire scelle le cadre fermé lorsque le remplissage s'inverse.

Skewed blade invert

2618Skewed blade invertBoutonsUn bouton arrondi et sombre qui s'inverse comme une lame d'accent inclinée s'ouvre vers l'extérieur depuis son centre lors du survol ou de la mise au point du clavier.

Diagonal wedge button

2676Diagonal wedge buttonBoutonsUn bouton carré rempli d'un coin triangulaire qui s'étend le long de la diagonale jusqu'à couvrir tout le visage.

Interlocking comb button

2678Interlocking comb buttonBoutonsDeux peignes de barres verticales glissent depuis le haut et le bas et s'entremêlent pour remplir le bouton, inversant l'étiquette au fur et à mesure de leur passage.

Arrow wipe button

2683Arrow wipe buttonBoutonsUn bouton de pilule dont la plaque d'accent, découpée en pointe de flèche, balaye depuis la gauche en survol et inverse l'étiquette lettre par lettre lorsque sa pointe se croise.

Converging chevron button

2684Converging chevron buttonBoutonsDeux plaques en forme de flèche arrivent des côtés opposés et se rejoignent au milieu du bouton, le scellant derrière l'étiquette.

Hatch sweep button

2685Hatch sweep buttonBoutonsDe fines hachures diagonales s'effacent sur le bouton lors du survol et défilent pour toujours, inversant l'étiquette partout où une ligne la traverse.

Slanted shutter button

2692Slanted shutter buttonBoutonsDeux panneaux d'accent inclinés descendent du haut et du bas pour se fermer sur la pilule sur une couture diagonale tandis que l'étiquette roule une fois et s'inverse à travers le remplissage.

Word tumble button

2694Word tumble buttonBoutonsLe survol fait rouler l'étiquette majuscule sur elle-même à l'intérieur d'une fente découpée tandis qu'un remplissage d'accent diagonal balaie le panneau derrière elle et qu'un mélange différent inverse la couleur du mot.

Invert and lift button

2700Invert and lift buttonBoutonsUn grand bouton au contour qui s'inverse en un remplissage uni et soulève quelques pixels en survol, puis se stabilise à nouveau à plat lorsqu'on appuie dessus.

Invert and grow button

2770Invert and grow buttonBoutonsUn bloc bordé qui échange ses couleurs d'encre et de papier et grandit à partir de son centre lorsqu'il est survolé, puis s'aplatit sous la presse.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Arrow wipe button
Un bouton de pilule dont la plaque d'accent, découpée en pointe de flèche, balaye depuis la gauche en survol et inverse l'étiquette lettre par lettre lorsque sa pointe se croise.
Color swap play button
Une pilule de jeu en majuscules qui échange ses couleurs de fond et de texte en survol, se soulevant à mesure que sa lueur colorée s'assombrit.
Comb wipe invert button
Deux peignes rayés imbriqués glissent par le haut et par le bas pour recouvrir une pilule noire, inversant l'étiquette au fur et à mesure de leur passage.

Conseils de design

Ouvrir l’index complet

Étiquettes

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)