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.
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.
Comment faire un bouton HTML ?
Mis à jour :
Publié :
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é.
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 :
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.
Partager cet article sur les réseaux sociaux
Articles recommandés
Le guide complet pour insérer ses vidéos en HTML
Insérer des espaces en HTML : comment faire ?
Balise : comment insérer un saut de ligne en HTML
"input" en HTML : un élément essentiel pour capturer et traiter les données utilisateur
Comment créer un compte à rebours en HTML
Liste des 13 meilleurs éditeurs HTML
Qu'est-ce qu'un Iframe et comment l'intégrer dans une page ?
Qu'est-ce qu'un doctype et comment l'écrire ?
Comment faire une liste HTML ? Balises et < ul> et < ol>
Langage HTML : le guide indispensable pour tout comprendre