1 files changed, 231 insertions, 0 deletions
diff --git a/files/fr/web/apps/design/building_blocks/buton/index.html b/files/fr/web/apps/design/building_blocks/buton/index.html
new file mode 100644
index 0000000000..1ff0416084
--- /dev/null
+++ b/files/fr/web/apps/design/building_blocks/buton/index.html
@@ -0,0 +1,231 @@
+---
+title: Bouton
+slug: Web/Apps/Design/Building_Blocks/Buton
+translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button
+---
+<p><span id="result_box" lang="fr"><span class="hps">Effectue</span> <span class="hps">une action</span> <span class="hps">quand touché</span> <span class="hps">par l'utilisateur.</span> <span class="hps">Ce sont des objets</span> <span class="hps">de l'interface utilisateur</span> <span class="hps">hautements</span> <span class="hps">flexibles</span> <span class="hps">qui ont une</span> <span class="hps">grande variété de styles</span><span>.</span> <span class="hps">Consultez le guide</span> <span class="hps">de codage</span> pour <span class="hps">la façon de</span> <span class="hps">mettre en œuvre des</span> <span class="hps">boutons</span> <span class="hps">qui ressemblent à</span> <span class="hps">ceux décrits ici.</span></span></p>
+<h2 id="Caractéristiques">Caractéristiques</h2>
+<ul>
+ <li><span id="result_box" lang="fr"><span class="hps">Les boutons ont</span> <span class="hps">deux composantes :</span> <span class="hps">une cible visuelle</span> <span class="hps">et une cible</span> <span class="hps">de</span> <span class="hps">toucher</span><span>.</span> <span class="hps">La cible</span> <span class="hps">de toucher</span> <span class="hps">est toujours plus grande</span><span>,</span> <span class="hps">afin de réduire les</span> <span class="hps">erreurs de ciblage</span> <span class="hps">en rendant</span> <span class="hps">la touche</span> <span class="hps">plus facile</span> <span class="hps">à toucher</span><span>.</span></span></li>
+ <li>Les boutons ont deux états : normal et pressé.</li>
+ <li>Ils peuvent aussi être <strong>désactivés</strong>, ce qui signifie qu'ils sont inutilisables, et sont seulement affichés pour indiquer qu'ils sont désactivés.</li>
+</ul>
+<p>Il y a différents types de boutons :</p>
+<dl>
+ <dt>
+  Boutons d'action</dt>
+ <dd>
+  <span id="result_box" lang="fr"><span class="hps">Utilisé</span>s <span class="hps">lorsqu'il n'y a que</span> <span class="hps">quelques</span> <span class="hps">actions</span> <span class="hps">et qu'une liste</span> <span class="hps">n'est pas nécessaire.</span> <span class="hps">Le</span> <span class="hps">bouton d'action</span> <span class="hps">principal</span> <span class="hps">utilise une</span> <span class="hps">couleur</span> <span class="hps">spéciale pour indiquer</span> <span class="hps">que c'est la</span> <span class="hps">première option</span><span>.</span></span></dd>
+ <dt>
+  Boutons de listes</dt>
+ <dd>
+  <span id="result_box" lang="fr"><span class="hps">Utilisés</span> <span class="hps">lors de l'affichage</span> <span class="hps">d'une</span> <span class="hps">liste d'actions</span><span>,</span> <span class="hps">ou</span> <span class="hps">pour déclencher l'affichage</span> <span class="hps">d'un sélecteur de</span> <span class="hps">valeur</span><span>.</span></span></dd>
+ <dt>
+  Boutons de champ de saisie</dt>
+ <dd>
+  <span id="result_box" lang="fr"><span class="hps">Utilisés pour</span> <span class="hps">effectuer des actions</span> <span class="hps">avec</span> <span class="hps">les champs de saisie</span><span>.</span></span></dd>
+ <dt>
+  Boutons spéciaux/personnalisés</dt>
+ <dd>
+  <span id="result_box" lang="fr"><span class="hps">Utilisés pour fournir des</span> <span class="hps">actions</span> <span class="hps">spécifiques, comme</span> <span class="hps">l'enregistrement,</span> <span class="short_text" id="result_box" lang="fr"><span class="hps">la numérotation</span></span><span>, etc</span><span>.</span></span></dd>
+</dl>
+<h2 id="Captures_d'écran">Captures d'écran</h2>
+<p><span id="result_box" lang="fr"><span class="hps">Voici quelques</span> <span class="hps">exemples visuels de</span> <span class="hps">ce à quoi les boutons</span> <span class="hps">devraient ressembler</span><span>.</span> <span class="hps">N'oubliez pas que</span> <span class="hps">vous</span> <span class="hps">pouvez utiliser</span> <span class="hps">les feuilles de style</span> <span class="hps">et</span> <span class="hps">des ressources d'images</span> <span class="hps">fournies dans</span> <span class="hps">le guide</span> <span class="hps">de codage</span> <span class="hps">pour les implémenter</span><span class="hps">.</span></span></p>
+<h3 id="Boutons_d'action">Boutons d'action</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Utilisé</span>s <span class="hps">lorsqu'il n'y a que</span> <span class="hps">quelques</span> <span class="hps">actions</span> <span class="hps">et qu'une liste</span> <span class="hps">n'est pas nécessaire.</span> <span class="hps">Le</span> <span class="hps">bouton d'action</span> <span class="hps">principal</span> <span class="hps">utilise une</span> <span class="hps">couleur</span> <span class="hps">spéciale pour indiquer</span> <span class="hps">que c'est la</span> <span class="hps">première option</span><span>.</span></span></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col"> Première action</th>
+   <th scope="col">Seconde action</th>
+   <th scope="col">Supprimer</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Normal</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4693/btn-main-normal.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4699/btn-secondary-normal.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4687/btn-delete-normal.jpg" style="width: 140px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4691/btn-main-lit.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4697/btn-secondary-lit.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4685/btn-delete-lit.jpg" style="width: 140px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4689/btn-main-disabled.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4695/btn-secondary-disabled.jpg" style="width: 140px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4683/btn-delete-disabled.jpg" style="width: 140px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<p>Sur un fond sombre, les boutons d'action ont une apparence spéciale, comme ci-dessous.</p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">Première action</th>
+   <th scope="col">Seconde action</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4701/btn-primary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4703/btn-secondary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Boutons_de_liste">Boutons de liste</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Utilisés</span> <span class="hps">lors de l'affichage</span> <span class="hps">d'une</span> <span class="hps">liste d'actions</span><span>,</span> <span class="hps">ou</span> <span class="hps">pour déclencher l'affichage</span> <span class="hps">d'un sélecteur de</span> <span class="hps">valeur</span><span>.</span></span></p>
+<h4 id="Déclencheurs">Déclencheurs</h4>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col"><span class="short_text" id="result_box" lang="fr"><span class="hps">Déclencher une action</span> <span class="hps">dans la vue actuelle</span></span></th>
+   <th scope="col"><span class="short_text" id="result_box" lang="fr"><span class="hps">Déclencher une action</span> <span class="hps">dans une nouvelle vue </span></span></th>
+   <th scope="col"><span class="short_text" id="result_box" lang="fr"><span class="hps">Afficher</span> <span class="hps">un sélecteur de</span> <span class="hps">valeur</span></span></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Normal</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4725/btn-trigger-current-normal.png" style="width: 291px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4731/btn-trigger-new-normal.png" style="width: 290px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4743/btn-trigger-selector-normal.png" style="width: 291px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4727/btn-trigger-current-pressed.png" style="width: 291px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4733/btn-trigger-new-pressed.png" style="width: 289px; height: 39px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4745/btn-trigger-selector-pressed.png" style="width: 291px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4723/btn-trigger-current-disabled.png" style="width: 290px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4729/btn-trigger-new-disabled.png" style="width: 290px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4741/btn-trigger-selector-disabled.png" style="width: 291px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Sélecteur_de_valeur">Sélecteur de valeur</h4>
+<p><span id="result_box" lang="fr"><span class="hps">Une fois</span> <span class="hps">que le sélecteur de</span> <span class="hps">valeur</span> <span class="hps">a été ouvert,</span> <span class="hps">vous</span> <span class="hps">aurez besoin d'au</span> <span class="hps">moins un bouton</span> <span class="hps">sur le panneau</span> <span class="hps">de sélection de</span> <span class="hps">valeur</span> <span class="hps">pour annuler </span><span class="hps">ledit sélecteur de</span> <span class="hps">valeur</span><span>.</span> <span class="hps">Ces</span> <span class="hps">boutons doivent</span> <span class="hps">ressembler à</span> <span class="hps">ce qui suit:</span></span></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Normal</th>
+   <th scope="col">Pressé</th>
+   <th scope="col">Désactivé</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4755/btn-selector-normal.png" style="width: 269px; height: 39px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4757/btn-selector-pressed.png" style="width: 269px; height: 39px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4753/btn-selector-disabled.png" style="width: 269px; height: 39px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Boutons_de_champ_de_saisie">Boutons de champ de saisie</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Les boutons de champ</span> <span class="hps">de saisie</span> <span class="hps">sont des boutons</span> <span class="hps">associés à</span> <span class="hps">un champ de saisie</span><span>,</span> <span class="hps">qui, lorsqu'il est</span> <span class="hps">pressé,</span> <span class="hps">effectuent une action</span> <span class="hps">liée à ce</span> <span class="hps">champ de saisie.</span></span></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Normal</th>
+   <th scope="col">Pressé</th>
+   <th scope="col">Désactivé</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4761/input-field-normal.png" style="width: 320px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4763/input-field-pressed.png" style="width: 320px; height: 40px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/4759/input-field-disabled.png" style="width: 320px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h3 id="Boutons_spéciaux">Boutons spéciaux</h3>
+<p><span id="result_box" lang="fr"><span class="hps">Les</span> <span class="hps">boutons spéciaux</span> <span class="hps">sont des boutons</span> <span class="hps">de style visuels avec des icônes,</span><span class="hps"> utilisés</span> <span class="hps">à des fins</span> <span class="hps">spéciales, telles que</span> <span class="hps">l'exploitation</span> <span class="hps">de la</span> <span class="hps atn">caméra de l'</span><span>appareil</span><span>,</span> <span class="hps">répondre et</span> <span class="hps">raccrocher le</span> <span class="hps">téléphone</span><span>,</span> <span class="hps">et l'activation de</span> <span class="hps">la</span> <span class="hps">numérotation</span> <span class="hps">au clavier</span><span>.</span> <span class="hps">Vous pouvez</span> <span class="hps">bien sûr</span> <span class="hps">trouver</span> <span class="hps">d'autres utilisations pour</span> <span class="hps">ce style de</span> <span class="hps">bouton.</span></span></p>
+<h4 id="Boutons_photo">Boutons photo</h4>
+<p><span id="result_box" lang="fr"><span class="hps">Ces</span> butons<span class="hps"> n'ont pas</span><span class="hps"> d'état désactivé</span><span>, vous</span> <span class="hps">n'avez tout simplement</span> <span class="hps">pas</span> <span class="hps">besoin de les afficher si la prise</span><span class="hps"> de photos</span> <span class="hps">n'est pas disponible.</span></span></p>
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">Enregistrement vidéo</th>
+   <th scope="col">Arrêter l'enregistrement vidéo</th>
+   <th scope="col">Prendre photo</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Normal</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4771/video-record-normal.png" style="width: 100px; height: 45px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4775/video-stop-normal.png" style="width: 100px; height: 45px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4767/camera-normal.png" style="width: 100px; height: 45px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4773/video-record-pressed.png" style="width: 100px; height: 45px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4777/video-stop-pressed.png" style="width: 100px; height: 45px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4769/camera-pressed.png" style="width: 100px; height: 45px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Boutons_téléphone">Boutons téléphone</h4>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row"> </th>
+   <th scope="col">Répondre</th>
+   <th scope="col">Raccrocher</th>
+   <th scope="col">Masquer le clavier</th>
+  </tr>
+  <tr>
+   <th scope="row">Normal</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4781/phone-answer-normal.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4787/phone-hangup-normal.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4793/hide-dialer-normal.png" style="width: 130px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4783/phone-answer-pressed.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4789/phone-hangup-pressed.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4795/hide-dialer-pressed.png" style="width: 130px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4779/phone-answer-disabled.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4785/phone-hangup-disabled.png" style="width: 130px; height: 40px;"></td>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4791/hide-dialer-disabled.png" style="width: 130px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h4 id="Boutons_personnalisés">Boutons personnalisés</h4>
+<p><span id="result_box" lang="fr"><span class="hps">Voici des exemples boutons personnalisés</span><span>, ici</span> <span class="hps">pour ajouter</span> <span class="hps">un contact.</span></span></p>
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Normal</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4799/generic-normal.png" style="width: 90px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Pressé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4801/generic-pressed.png" style="width: 90px; height: 40px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">Désactivé</th>
+   <td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4797/generic-disabled.png" style="width: 90px; height: 40px;"></td>
+  </tr>
+ </tbody>
+</table>
+<h2 id="Voir_aussi">Voir aussi</h2>
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS user experience</a></li>
+ <li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Button coding guide</a></li>
+</ul>