Boutons Showit : le guide complet pour créer des boutons professionnels et cohérents avec votre branding

Les équipes Showit nous ont écouté 😍

La fonctionnalité des boutons est désormais disponible et ça change beaucoup de chose.

Pour ceux qui ont connu Showit avant 2025, vous savez que généré des boutons n’était pas très simples. 

Il fallait faire attention à positionner le texte de manière à ce que le bouton soit cliquable de partout, trouver des parades pour l’effet “hover” (en survol), etc.

Bref, ce n’était pas simple.

Maintenant non seulement il est possible de créer de vrais boutons, mais en plus, ils sont intégrer dans les site settings !

Trève de bavardage, je vous dis tout sur les boutons les boutons sur Showit, et comment les utiliser efficacement sur votre site.

Dans ce tutoriel, vous allez donc apprendre à créer, personnaliser et utiliser correctement les boutons dans Showit, même si la technique et vous ça fait deux.

Pourquoi les boutons sont essentiels dans votre site Showit

Avant d’entrer dans la partie technique, il est important de comprendre une chose : un bouton n’est pas juste décoratif.

Un bon bouton doit :

• attirer l’attention sans casser votre branding
• rester cohérent sur toutes les pages
• guider naturellement votre visiteur vers l’action suivante

Sur Showit, les Button Styles permettent justement de garder une cohérence globale sans devoir tout modifier manuellement.

Créer des styles de boutons (Button Styles)

Showit fonctionne avec des styles globaux. Cela signifie que vous pouvez créer un bouton une seule fois et l’utiliser partout sur votre site.

Étape 1 : Ouvrir les Design Settings

Dans votre espace de design, ouvrez les paramètres globaux du site pour accéder aux styles.

Étape 2 : Accéder aux Button Styles

Dans la section dédiée aux boutons, vous pouvez créer plusieurs styles :

• Primary Button : votre bouton principal (ex : “Réserver”, “Découvrir l’offre”)
• Secondary Button : bouton secondaire pour les actions moins prioritaires

Personnaliser l’apparence d’un bouton

Une fois votre style créé, vous pouvez ajuster différents éléments :

• Couleur de fond
• Couleur du texte
• Typographie
• Bordures et arrondis
• Espacement interne

L’objectif n’est pas de tout personnaliser, mais de rester fidèle à votre univers visuel.

Posez-vous toujours cette question :
Est-ce que ce bouton reflète vraiment ma marque ?

Comprendre les états Normal et Hover

Showit vous permet de définir deux apparences pour un bouton :

• Normal : l’apparence par défaut
• Hover : ce que voit l’utilisateur lorsqu’il passe la souris dessus

Le Hover est souvent négligé, pourtant il améliore énormément l’expérience utilisateur.

Exemples simples :

• inverser les couleurs
• ajouter une légère transparence
• modifier la bordure

Restez subtile : l’objectif est de guider, pas de distraire.

Ajouter un bouton sur une page

Une fois vos styles configurés, vous pouvez ajouter un bouton directement sur votre page.

Étape 1 : Ajouter un élément Button

Depuis la barre d’outils, insérez un bouton dans votre canvas.

Étape 2 : Appliquer un style existant

Sélectionnez le style Primary ou Secondary que vous avez créé. Par défaut, c’est le style Primary qui s’affiche.

Cela garantit une cohérence automatique sur tout le site.

Personnaliser un bouton individuel

Même si vous utilisez des styles globaux, vous pouvez modifier certains paramètres localement :

• le texte du bouton
• le lien (page interne, URL externe, ancre…)
• l’alignement

Attention cependant : évitez de casser votre design system en créant trop d’exceptions.

Transformer du texte ou une forme en bouton

Showit permet aussi de convertir un texte ou une forme en bouton.

Cela peut être utile si vous avez déjà un élément design que vous souhaitez rendre cliquable.

Pour cela :

1. Sélectionnez votre texte ou votre forme
2. Utilisez l’option de conversion en bouton
3. Appliquez ensuite un style existant

Astuce : utilisez cette fonctionnalité avec modération pour garder une structure claire dans votre design.

Les erreurs fréquentes avec les boutons Showit

Voici les erreurs que je vois le plus souvent :

• Multiplier les styles différents sur une même page
• Choisir des couleurs trop proches du fond
• Oublier l’état Hover
• Ajouter des boutons partout sans vraie intention stratégique

Un bouton doit toujours mener quelque part de précis.

Rendre vos boutons plus efficaces (et pas juste beaux)

Avant d’ajouter un bouton, demandez-vous :

• Quelle action je veux que mon visiteur fasse ici ?
• Est-ce que le texte du bouton est clair ?
• Est-ce que ce bouton aide vraiment la navigation ?

Un bon bouton ne crie pas. Il guide.

En résumé

Créer des boutons dans Showit est simple techniquement, mais leur impact dépend surtout de la cohérence visuelle et de la stratégie derrière.

En utilisant les Button Styles, vous gagnez du temps, vous renforcez votre branding et vous offrez une expérience plus fluide à vos visiteurs.

Et souvenez-vous : votre site ne doit pas seulement être joli. Il doit aider vos visiteurs à avancer naturellement vers vos offres.