Composants

cta

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

28 sur 28

Pulse button

1524Pulse buttonBoutonsUn bouton qui répond à un clic avec un seul anneau extensible à partir de la position du pointeur et une courte pression, puis s'installe.

Magnetic button

1531Magnetic buttonBoutonsUn bouton qui dérive vers le pointeur lorsqu'il se trouve à l'intérieur d'un rayon défini et revient se reposer lorsqu'il part, l'étiquette et la flèche se déplaçant un peu plus loin que le corps.

Flip face button

1633Flip face buttonBoutonsUn bouton à deux faces qui s'échange l'une contre l'autre lors d'un tour tridimensionnel, s'inversant d'où qu'il se trouve lorsque le pointeur part.

Underglow border button

1662Underglow border buttonBoutonsUn bouton dont la bordure de deux pixels est une bande teintée se déplaçant latéralement sur une boucle sans fin, avec une lueur floue correspondante en dessous qui se déplace au rythme de celle-ci.

Wipe fill button

1664Wipe fill buttonBoutonsUn bouton de pilule dont le disque de la taille d'une pièce de monnaie s'agrandit pour couvrir toute la forme en survol, effaçant le remplissage d'accent sous une étiquette qui ne bouge jamais.

Gradient swap button

1862Gradient swap buttonBoutonsUn bouton arrondi dont l'ombrage diagonal échange ses deux arrêts au survol, de sorte que le coin lumineux traverse le visage.

Light sweep button

1869Light sweep buttonBoutonsUn bouton de contour éclairé dont le bord brillant envoie une étroite bande de lumière le balayant en survol.

Swallowing Chip Button

1895Swallowing Chip ButtonBoutonsUn bouton de pilule avec une petite puce lumineuse épinglée sur son bord droit qui s'élargit au survol jusqu'à recouvrir tout le bouton.

Tilted perspective button

2068Tilted perspective buttonBoutonsUn call-to-action arrondi qui se trouve dans une perspective 3D permanente et bascule vers le pointeur lorsqu'il traverse la plaque.

Wash swap pill

2083Wash swap pillBoutonsUne grande pilule noire dont le remplissage se dissout au survol pour révéler un lavis légèrement teinté en dessous tandis que l'étiquette passe du clair au foncé.

Light sweep effect

2180Light sweep effectBoutonsUne bande de lumière diagonale qui traverse un bouton une fois, déclenchée par un survol, une pression ou une minuterie répétitive.

Tilted plinth call to action

2254Tilted plinth call to actionBoutonsUn gros appel à l'action reposant sur un socle de couleur unie, légèrement incliné dans l'espace, qui se soulève de sa base en vol stationnaire et s'enfonce sous une presse.

Charge Up Action Button

2314Charge Up Action ButtonBoutonsUne pilule de charbon de bois qui s'éclaire en un dégradé saturé en survol, se soulevant de la surface tandis que sa marque tourne et s'éclaircit.

Staggered Offer Drawer

2441Staggered Offer DrawerSuperpositionsUn tiroir du bas promouvant une offre limitée, où le titre, le prix et les boutons apparaissent les uns après les autres au lieu d'apparaître tous en même temps.

2485Rocking icon CTABoutonsUne pilule d'accent solide dont l'icône de calendrier principale bascule comme un métronome en survol et, lorsque vous cliquez dessus, dessine une coche et remplace le libellé par une étiquette confirmée avant de revenir en arrière.

Squaring backer button

2567Squaring backer buttonBoutonsUne pilule solide avec un jumeau incliné derrière elle qui se met à niveau et s'allume en survol tandis qu'une flèche se déplie depuis la gauche à côté de l'étiquette.

Swelling pill button

2578Swelling pill buttonBoutonsUne pilule dégradée d'une teinte qui gonfle plus en survol tandis qu'une ombre teintée s'étend en dessous et se comprime brièvement lorsqu'elle est pressée.

Tilted Stack CTA

2586Tilted Stack CTABoutonsUn gros appel à l'action qui repose en rotation sur une pile d'ombres décalées, puis se tient debout sous le pointeur.

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.

Disc to Pill CTA

2622Disc to Pill CTABoutonsUn petit disque rempli à côté d'une étiquette majuscule nue s'étire en une pilule pleine en survol ou en mise au point, révélant le texte et entraînant la flèche.

Rim to fill gradient button

2635Rim to fill gradient buttonBoutonsUn bouton sombre affiche uniquement un mince bord dégradé au repos ; le survol laisse tomber le panneau intérieur de sorte que le dégradé inonde tout le visage et une pression le presse.

Graphite Slab CTA

2669Graphite Slab CTABoutonsUn bouton en dalle sombre de largeur fixe avec une subtile rampe en graphite qui se soulève en survol et porte une fine règle d'accent le long de son bord inférieur.

Sheen scale button

2702Sheen scale buttonBoutonsUn bouton rempli de taille fixe avec un éclat bicolore en diagonale qui gonfle légèrement et projette un halo correspondant lorsqu'il est survolé ou mis au point.

Count Sweep CTA

2711Count Sweep CTABoutonsUn appel à l'action sombre et compact avec une marque principale, un séparateur et un décompte en direct, traversé par une lente traînée lumineuse diagonale en survol.

Ring halo button

2722Ring halo buttonBoutonsUn bouton d'accent solide qui s'assombrit au survol et fait apparaître un anneau de contour concentrique avec une dominante de couleur douce en dessous.

Spotlight fill button

2730Spotlight fill buttonBoutonsUn bouton de pilule dans un accent saturé qui atténue son remplissage sous un voile sombre en survol tandis qu'un doux projecteur ovale suit le pointeur.

Draining fill button

2763Draining fill buttonBoutonsUn bouton inondé qui s'écoule d'un bord lors du survol, laissant un contour creux avec l'étiquette retournée vers l'accent.

Drifting halo button

2764Drifting halo buttonBoutonsUn bouton sombre entouré d'un cadre en forme de halo légèrement plus grand dans lequel une bande lumineuse de l'accent dérive sans fin autour du périmètre, éclaircissant et soulevant la plaque en survol.

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.

Charge Up Action Button
Une pilule de charbon de bois qui s'éclaire en un dégradé saturé en survol, se soulevant de la surface tandis que sa marque tourne et s'éclaircit.
Count Sweep CTA
Un appel à l'action sombre et compact avec une marque principale, un séparateur et un décompte en direct, traversé par une lente traînée lumineuse diagonale en survol.
Disc to Pill CTA
Un petit disque rempli à côté d'une étiquette majuscule nue s'étire en une pilule pleine en survol ou en mise au point, révélant le texte et entraînant la flèche.

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)