--- url: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/design/button-styles' title: 'Choisir les styles de boutons qui guident les visiteurs | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:00:08+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Vous décidez de l’insistance de chaque bouton. Un bouton plein marque l’action voulue avant tout, et un bouton contourné à côté propose l’alternative sans concurrencer. Cette page montre comment styliser une telle paire et quel réglage change quoi. Pour ajouter un bouton et définir son lien, voir Ajouter un bouton. La vidéo suit les étapes ci-dessous : elle fait de Apply now le bouton principal et ajoute un second bouton contourné. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Choisir les styles de boutons qui guident les visiteurs' description: |- Vous décidez de l’insistance de chaque bouton. Un bouton plein marque l’action voulue avant tout, et un bouton contourné à côté propose l’alternative sans concurrencer. Cette page montre comment styliser une telle paire et quel réglage change quoi. Pour ajouter un bouton et définir son lien, voir Ajouter un bouton. La vidéo suit les étapes ci-dessous : elle fait de Apply now le bouton principal et ajoute un second bouton contourné. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:00:08+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/design/button-styles' articleSection: 'Guides de design' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/learn-dxpr-builder/design/button-styles' description: |- Vous décidez de l’insistance de chaque bouton. Un bouton plein marque l’action voulue avant tout, et un bouton contourné à côté propose l’alternative sans concurrencer. Cette page montre comment styliser une telle paire et quel réglage change quoi. Pour ajouter un bouton et définir son lien, voir Ajouter un bouton. La vidéo suit les étapes ci-dessous : elle fait de Apply now le bouton principal et ajoute un second bouton contourné. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) /[Guides de design](/fr/hc/documentation/learn-dxpr-builder/design/overview) # Choisir les styles de boutons qui guident les visiteurs. Apprendre DXPR BuilderCréer des pagesStyler vos élémentsGuides de design ## Dans ce guide Guides associés - [Ajouter un bouton](/fr/hc/documentation/apprendre-dxpr-builder/elements/bouton) - [Faire réagir les éléments au survol](/fr/hc/documentation/apprendre-dxpr-builder/design/effets-de-survol) - [Utiliser les couleurs de votre marque](/fr/hc/documentation/apprendre-dxpr-builder/design/couleurs-de-la-marque) Vous décidez de l’insistance de chaque bouton. Un bouton plein marque l’action voulue avant tout, et un bouton contourné à côté propose l’alternative sans concurrencer. Cette page montre comment styliser une telle paire et quel réglage change quoi. Pour ajouter un bouton et définir son lien, voir [Ajouter un bouton](/fr/hc/documentation/apprendre-dxpr-builder/elements/bouton). La vidéo suit les étapes ci-dessous : elle fait de Apply now le bouton principal et ajoute un second bouton contourné. ## Styliser un bouton principal et un second bouton Commencez avec un bouton sur la page, comme **Apply now**. 1. Survolez le bouton et ouvrez **More > Settings**. 2. Réglez **Type** sur **Primary**. 3. Réglez **Size** sur **Large** et cliquez sur **Save**. 4. Survolez de nouveau le bouton et ouvrez **More > Clone**. La copie apparaît juste sous l’original. 5. Ouvrez **More > Settings** sur la copie. Changez son **Title**, par exemple en `Download brochure`, et son **Link**. 6. Activez **Outline style** et cliquez sur **Save**. 7. Cliquez sur **Save** sur la barre d’outils. ## Choisir un style par action | Action | Style | Exemple | |---|---|---| | L’action voulue avant tout | Bouton uni **Primary** | Apply now | | Une alternative | **Outline style** dans le même **Type** | Download brochure | | Une action mineure | **Link**, qui ressemble à un lien de texte | Read the terms | | Un avertissement ou une étape finale | **Danger** ou **Warning** | Cancel my booking | Utilisez un bouton plein par section, pour que les visiteurs voient aussitôt où cliquer. Écrivez des libellés qui disent ce qui se passe : « Get started » plutôt que « Click here », « Send message » plutôt que « Submit ». ## Ce que vous voyez Deux grands boutons s’empilent dans la colonne : un plein avec la couleur primaire de votre thème et un contourné avec une bordure et du texte de la même couleur. Le plein attire l’œil en premier. Les liens ne s’ouvrent pas pendant la modification. Pour les tester, enregistrez la page, ouvrez le menu d’affichage (l’icône en forme d’œil) et choisissez **Preview**. ## Paramètres | Paramètre | Rôle | Valeur par défaut | |---|---|---| | **Type** | Le style de couleur : **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger**, **Link**, **Light** ou **Dark**. Les couleurs viennent de votre thème. | **Primary** | | **Outline style** | Une bordure et du texte colorés sans remplissage | Off | | **Size** | **Normal**, **Large** ou **Small** | **Normal** | | **Block button** | Étire le bouton sur toute la largeur de sa colonne | Off | | **Link target** | **Same window** ou **New window**. S’affiche une fois que **Link** a une valeur. | **Same window** | Pour les intégrateurs : chaque **Type** ajoute la classe Bootstrap `btn-`, comme `btn-primary`. Avec **Outline style** activé, elle devient `btn-outline-`, sauf pour **Link**, qui reste toujours `btn-link`. **Large** ajoute `btn-lg`, **Small** ajoute `btn-sm` et **Block button** ajoute `btn-block`. ## Si vous ne voyez pas le style - **Le bouton contourné ne montre aucune bordure.** **Type** vaut **Link**, qui ressemble toujours à un lien de texte, donc **Outline style** est sans effet. Choisissez un autre **Type** pour un bouton contourné. - **Le bouton disparaît presque.** **Light** est proche du blanc, donc il se fond dans une section blanche. Choisissez un **Type** plus sombre, ou donnez une couleur d’arrière-plan à la section. - **Le lien s’ouvre dans le même onglet.** **Link target** vaut **Same window**, et il ne s’affiche qu’une fois que **Link** a une valeur. Renseignez d’abord **Link**, puis choisissez **New window**. ## Et ensuite ? - [Ajouter un bouton](/fr/hc/documentation/apprendre-dxpr-builder/elements/bouton) : chaque réglage de bouton, avec une vidéo. - [Effets de survol](/fr/hc/documentation/apprendre-dxpr-builder/design/effets-de-survol) : assombrir un bouton ou ajouter une ombre quand le pointeur l’atteint. - [Couleur et image de marque](/fr/hc/documentation/apprendre-dxpr-builder/design/couleurs-de-la-marque) : garder les couleurs des boutons alignées sur votre marque.