Sur la plupart des pages réelles, un appel à l’action est une balise d’ancre avec un peu de CSS, pas un <button>. Les convertir en véritables widgets Bouton — plutôt que de les laisser en texte stylé — demande un petit travail de détective.
La voie rapide : aucune question de géométrie
Trois formes sont converties immédiatement en widget Bouton, sans autre test : un véritable élément <button> ; un lien dont la liste de classes contient btn ou button comme nom de classe exact ; et un lien dont l’affichage calculé est display: inline-block — c’est ainsi que le CSS classique des boutons s’écrit depuis quinze ans, si bien que la plupart des liens-boutons stylés de façon traditionnelle empruntent cette voie sans que vous le sachiez.
Un rôle button ou un nom de classe de type cta joue aussi en faveur de l’élément, mais seulement comme indice — les éléments qui les portent passent quand même par le test de géométrie ci-dessous.
La détection à partir du seul CSS
Le cas intéressant est un simple <a> qui a juste l’apparence d’un bouton. Comme la conversion se fait sur une page réellement rendue, les styles calculés peuvent être inspectés. Un élément est traité comme un bouton lorsque toutes ces conditions sont réunies :
- C’est un lien, un élément button, il a un rôle button, ou c’est un span/div avec un curseur pointer.
- Il ne contient aucun enfant de niveau bloc — un bouton est un contenu sur une seule ligne, donc tout ce qui contient un paragraphe, une liste ou un conteneur imbriqué est exclu.
- Son texte est court (environ une ligne). Un texte long est de la prose, pas un libellé de bouton.
- Il a un arrière-plan ou une bordure, un rayon d’angle et une vraie marge intérieure.
- Son affichage est block, inline-block, flex ou inline-flex.
Exiger toutes ces conditions ensemble est délibéré. Chaque indice pris isolément produit des faux positifs — beaucoup d’éléments qui ne sont pas des boutons ont un arrière-plan, et beaucoup ont des coins arrondis.
Ce qui est repris
Le texte du libellé, l’URL du lien, l’ouverture ou non dans un nouvel onglet, l’attribut nofollow, la couleur du texte, la couleur d’arrière-plan, la bordure et le rayon, l’ombre portée, la marge intérieure (via le contrôle Marge intérieure du texte propre au bouton) et l’ensemble des réglages de typographie.
Ce qui ne l’est pas
- Les états de survol. Les règles CSS de survol ne peuvent pas être lues dans un style calculé statique ; les couleurs de survol doivent donc être définies dans Elementor. C’est la retouche la plus fréquente après conversion.
- Les transitions et animations. Réappliquez-les avec les contrôles propres à Elementor.
- Les icônes dans les boutons peuvent devoir être choisies à nouveau si la source utilisait un SVG en ligne plutôt qu’une classe d’icône.
Quand un lien ne doit pas devenir un bouton
Les liens placés dans le texte d’un paragraphe restent dans le contenu de l’Éditeur de texte, avec leur balisage intact. C’est le bon comportement — transformer chaque lien en widget Bouton morcellerait votre texte courant en fragments.
Les chiffres exacts
Les seuils valent la peine d’être connus, car ils expliquent à la fois les réussites et les ratés. Le texte du libellé doit faire 48 caractères ou moins. Le rayon d’angle doit être d’au moins 3px. La marge intérieure doit être d’au moins 6px horizontalement ou 4px verticalement. Et il faut un arrière-plan ou une bordure.
Quarante-huit caractères, c’est à peu près là où un libellé cesse d’en être un. « Start your free trial today » en compte 27 ; une phrase de texte courant dans un encadré bordé dépasse largement ce seuil. Placer la limite à cet endroit sépare les appels à l’action des paragraphes stylés, qui partagent par ailleurs toutes les autres propriétés.
Le seuil minimal de marge intérieure écarte les badges et étiquettes en ligne. Une petite pastille colorée indiquant « Nouveau » a un arrière-plan, des coins arrondis et un texte court — tout ce qu’a un bouton, sauf une vraie marge intérieure. Exiger 6px horizontalement les maintient en texte au lieu de disperser de faux widgets Bouton dans vos titres.
L’angle mort des coins carrés
L’exigence de rayon a une conséquence qu’il faut assumer : un bouton à coins carrés qui ne passe pas par la voie rapide n’est pas détecté. Comme les liens inline-block sont convertis sans condition, cela touche deux formes précises : les ancres modernes stylées avec display: inline-flex ou flex (la manière habituelle de centrer une icône à côté d’un libellé), et les éléments div ou span cliquables. Donnez à l’un d’eux des coins volontairement vifs, à rayon nul — un vrai choix dans les mises en page brutalistes et éditoriales — et il est converti en texte stylé plutôt qu’en Bouton.
Ce compromis est intentionnel. Supprimer la condition de rayon ferait entrer dans le lot les cellules de tableau, les barres d’alerte, les encadrés colorés et tous les autres rectangles dotés d’un arrière-plan et d’un texte court. Quelques boutons carrés manqués sont une erreur bien moins coûteuse que des dizaines de faux boutons.
Si votre design en utilise, la solution est la voie rapide : faites de l’élément un véritable <button>, ou un lien avec btn ou button dans sa liste de classes — comme nom de classe exact, car btn-primary seul ne correspond pas. Un seul attribut règle le cas de tous ces boutons de la page.
La voie du curseur pour div et span
Parfois, un appel à l’action n’est pas du tout un lien — c’est un <div> ou un <span> câblé en JavaScript. Ceux-ci ne sont retenus que s’ils portent cursor: pointer, le seul indice fiable que l’auteur voulait les rendre cliquables.
Ils sont convertis en widget Bouton sans lien, car il n’y a aucun href à lire — la destination se trouvait dans un script supprimé par sécurité. Renseignez le lien ensuite. C’est tout de même un meilleur point de départ qu’un div stylé, puisque vous obtenez l’ensemble des contrôles du Bouton plutôt qu’un conteneur à restyler.
Quand la détection se trompe, corrigez-la
Les heuristiques restent des heuristiques, et vous n’êtes pas obligé d’accepter le résultat. En mode natif avec la méthode avancée, lancez l’analyse de mappage et ouvrez le panneau de mappage par élément : chaque élément détecté y est listé avec ce qu’il va devenir et le degré de confiance de ce choix, et chacun dispose d’une liste déroulante.
Un élément devenu Bouton qui devrait être un titre, ou une boîte stylée qui aurait dû rester un conteneur — changez-le là et convertissez. C’est plus rapide que de corriger dans Elementor ensuite, et cela résiste à une nouvelle conversion, ce qui n’est pas le cas des modifications manuelles.
Conseils
- Donnez aux appels à l’action une classe
buttonoubtndans la source ; cela lève toute ambiguïté et contourne le test de géométrie. - Vérifiez le href des blocs extraits — si vous n’avez copié qu’une section intérieure, une ancre englobante a pu rester en dehors.
- Définissez les styles de survol juste après l’importation, tant que vous savez encore à quoi correspond chaque bouton.
- Si un bouton n’a pas été converti, vérifiez d’abord son rayon d’angle — les coins carrés en sont généralement la cause.