Comment faire un bouton HTML ?

Les boutons HTML sont très courants sur le web. Se comportant comme un lien hypertexte, le bouton HTML améliore l'expérience de navigation de l'internaute grâce un visuel plus attractif et interactif. Les sites web utilisent également des langages comme le JavaScript, pour que les boutons déclenchent des actions plus techniques, et le CSS, pour donner aux boutons une variété de styles.

Créer un bouton cliquable en HTML

Le code de base d'un bouton HTML repose sur ces caractères :

<button>TEXTE SUR LE BOUTON</button>

Bien que l'apparence des boutons diffère, le code reste identique. La différence réside dans le style donné grâce au CSS, le langage technique qui décrit la présentation d'une page (couleur, police, mise en page).

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="poaEELQ" data-user="Margemma" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

<span>See the Pen <a href="https://codepen.io/Margemma/pen/poaEELQ">

Bouton HTML avec CSS</a> by Wiki Web Entrepreneur (<a href="https://codepen.io/Margemma">@Margemma</a>)

on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

À défaut de texte, une image peut être incrustée dans le bouton pour attirer le regard de l'internaute. Le plus connu est le bouton hamburger, dont la symbolique est associée au menu d'un site web.

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="dydppwO" data-user="Margemma" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

  <span>See the Pen <a href="https://codepen.io/Margemma/pen/dydppwO">

Bouton HTML hamburger</a> by Wiki Web Entrepreneur (<a href="https://codepen.io/Margemma">@Margemma</a>)

on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

En d'autres termes, un bouton cliquable HTML est une version améliorée d'un lien hypertexte pour rendre la navigation plus agréable et inciter l'internaute à rester plus longtemps sur le site.

La position d'un bouton n'est pas anodine. Un visuel captivant et bien placé permet au visiteur de naviguer de manière intuitive, il attise sa curiosité et, par conséquent, le garde plus longtemps sur le site, améliorant ainsi le taux de rebond. Le but est de faciliter la tâche de l'internaute afin qu'il trouve rapidement l'information qu'il recherche.

Gagnez du temps dans la gestion de votre code et de vos données

Téléchargez ce guide pour effectuer des vérifications et des changements en masse avec les regex et gagner en productivité.

• Qu'est-ce qu'une regex ?
• La structure d'une regex
• Des astuces d'utilisation
• Mémento sur les regex

Télécharger le guide En savoir plus Télécharger le guide

Télécharger

Tous les champs sont obligatoires.

Merci d'avoir soumis le formulaire

Cliquez sur le lien pour accéder au contenu en tout temps

Télécharger

Exemple de bouton cliquable HTML

Aller à la page suivante ou revenir à la page précédent

La fonction première d'un bouton cliquable est de permettre aux visiteurs d'évoluer au gré des pages. Revenir en arrière, passer à l'étape suivante, se rendre à la page d'accueil sont autant de possibilités pour changer de page.

Inviter à visiter une page interne du site

Les boutons HTML « En savoir plus », « Je découvre » ou « Accéder » sont des boutons d'invitation pour découvrir l'offre complète proposée sur le site ou lire la suite d'un article. L'objectif est d'éveiller la curiosité de l'internaute grâce à un titre accrocheur et au texte illustrant le bouton HTML.

Un lien vers un site externe

Les sites comparatifs sont adeptes des boutons HTML cliquables pour faire la promotion d'un produit ou service tierce et ainsi rediriger l'internaute vers le site propriétaire de l'offre. Cette pratique est beaucoup utilisée en marketing d'affiliation.

Un lien vers les réseaux sociaux

Le bouton HTML permet de mettre en évidence la présence sur les réseaux sociaux. Invitation à rejoindre la page de l'entreprise, commenter, liker : ces boutons génèrent de l'engagement auprès de la communauté.

Lire la suite

Les blogs construits sous WordPress sont friands de ce bouton. Si les premières lignes d'un article attirent l'attention de l'internaute en répondant à une problématique, il aura envie de lire la suite : la magie du bouton « Lire la suite » ou « Read more » opère alors.

Comment coder un bouton cliquable HTML

Les exemples présentés ci-dessus montrent la richesse que propose le bouton HTML classique et ne nécessitent aucune compétence technique poussée. Deux éléments suffisent pour créer un bouton HTML : la balise <button> et la balise <a href> pour intégrer l'URL de la page.

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="LYQRLoo" data-user="Margemma" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

<span>See the Pen <a href="https://codepen.io/Margemma/pen/LYQRLoo">

Bouton HTML avec lien</a> by Wiki Web Entrepreneur (<a href="https://codepen.io/Margemma">@Margemma</a>)

on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Ajouter un bouton HTML dans un formulaire

Qu'en est-il des boutons HTML dans les formulaires ? À la différence d'un bouton HTML cliquable qui permet de naviguer pour s'informer, le bouton HTML dans un formulaire engage l'internaute à donner des informations. Plusieurs étapes sont nécessaires avant de cliquer sur le bouton final, comme remplir des champs ou encore cocher une checkbox (case RGPD devenue indispensable pour recueillir le consentement de l'internaute).

Les développeurs parlent alors d'« input » ; il s'agit d'attribuer une fonction particulière au bouton HTML en l'associant à du langage JavaScript. Trois attributs spécifiques existent :

• DISABLED : le bouton devient non cliquable. Pour le rendre actif, tous les champs et checkboxes doivent être complétés.
• TYPE : une action est associée au clic (créer, envoyer, confirmer, réinitialiser) avec les valeurs RESET ou SUBMIT
• ACCESSKEY : il convient de spécifier un raccourci clavier pour simuler le clic.

Les boutons dans les formulaires font partie intégrante de la vie numérique. Requête sur un moteur de recherche, outil marketing pour un call-to-action… À force de les utiliser, l'internaute ne se rend plus compte de leur présence et, surtout, de leur pouvoir.

Exemple de bouton HTML dans un formulaire

Rechercher

Rechercher une information sur Internet en indiquant le nom d'un site ou un mot-clé passe obligatoirement par un formulaire. Avec le temps, le moteur de recherche Google a fait disparaître le bouton RECHERCHER pour le remplacer par l'attribut ACCESSKEY.

Formulaire de contact

La prise de contact constitue un exemple type de bouton HTML présent dans un formulaire. Demande de renseignement, prise de rendez-vous, téléchargement d'un document… Ces différentes requêtes obligent l'internaute à remplir des champs et à cliquer sur un bouton HTML pour la validation et l'envoi des informations fournies.

Encart ou pop-up d'inscription à une newsletter

L'utilisation d'un bouton HTML dans un formulaire est fréquente pour l'inscription à une newsletter. Présenté sous forme d'encart ou de pop-up, c'est un outil marketing puissant pour récolter l'adresse e-mail de leads ou de prospects et élaborer des campagnes d'emailing par la suite.

Identification de compte

Pour accéder à son compte, son propriétaire doit fournir des informations personnelles qui confirment son identité. Seuls l'adresse e-mail et le mot de passe associés permettent d'accéder à l'interface. Pour renforcer la sécurité, un bouton de type DISABLED est configuré : il deviendra actif une fois tous les champs complétés.

Paiement en ligne

Le paiement en ligne fait également appel aux fonctionnalités du bouton HTML dans un formulaire. Comme pour l'identification à un compte, des éléments personnels sont à communiquer dans les champs pour débloquer le bouton. Afin d'obtenir l'accord de paiement de la banque, un langage JavaScript contrôle cette action pour des raisons de sécurité.

Comment coder un bouton HTML dans un formulaire

Code attribut de type SUBMIT

Dans le cadre d'un bouton d'envoi simple, le code HTML <input type="submit"> permet d'envoyer des formulaires. Pour un bouton personnalisé avec la commande JavaScript correspondante, les éléments suivants sont à privilégier : <button> ou <input type="button">.

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="RwQobpj" data-user="Margemma" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

<span>See the Pen <a href="https://codepen.io/Margemma/pen/RwQobpj">

Bouton submit</a> by Wiki Web Entrepreneur (<a href="https://codepen.io/Margemma">@Margemma</a>)

on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Code attribut de type ACCESSKEY

Pour des raisons pratiques, les développeurs font appel à l'attribut universel ACCESSKEY en spécifiant la touche clavier correspondant à l'action. Dans le code, le raccourci choisi est indiqué entre guillemets : accesskey="touche du clavier".

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="bGLBbRQ" data-user="Margemma" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

<span>See the Pen <a href="https://codepen.io/Margemma/pen/bGLBbRQ">

Bouton avec raccourci clavier</a> by Wiki Web Entrepreneur (<a href="https://codepen.io/Margemma">@Margemma</a>)

on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Code attribut de type DISABLED

Cette fonction s'applique dans les formulaires nécessitant le remplissage de champs obligatoires. En cas d'informations manquantes, le bouton reste inactif. L'attribut DISABLED s'utilise obligatoirement avec du JavaScript.

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="PoQbYJB" data-user="Margemma" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">

  <span>See the Pen <a href="https://codepen.io/Margemma/pen/PoQbYJB">

  Bouton désactivé</a> by Wiki Web Entrepreneur (<a href="https://codepen.io/Margemma">@Margemma</a>)

  on <a href="https://codepen.io">CodePen</a>.</span>

</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez l’outil CMS de HubSpot.