créer un bouton flottant pour son site Squarespace type (“Contact”)

Un bouton flottant, c’est ce petit élément qui reste visible en permanence sur une page, généralement placé en bas à droite de l’écran. Il attire immédiatement l’attention et facilite l’accès à une action, comme une prise de contact rapide, de rendez-vous ou l’ouverture d’un chat en direct.

Sur Squarespace, il n’existe pas de fonctionnalité native pour ajouter un bouton flottant… en revanche, avec un peu de HTML simple et CSS, il est tout à fait possible d’en créer un ! ☝️

Avant de passer à la partie technique, voyons ensemble pourquoi un bouton flottant peut être un vrai atout pour votre site, et comment l’utiliser efficacement.

AVANT DE DÉMARRER… RÉCUPÈRE TES 5 CODES CSS Squarespace À COPIER-COLLER

Tu as créé ton site Squarespace en autonomie, mais tu sens qu’il y manque un petit quelque chose pour le rendre vraiment unique ? Ce guide offert, simple et facile à utiliser, te permettra de personnaliser en quelques clics et copier-coller ton site Squarespace.

ACCÉDER À TON GUIDE NOTION OFFERT

pourquoi créer un bouton flottant sur son site Squarespace ?

Un bouton flottant n’est pas seulement un élément esthétique. Il joue un rôle clé dans l’optimisation de l’expérience utilisateur et des conversions. Il fait partie intégrante du design ! Voici cinq bonnes raisons d’en ajouter un à votre site :

faciliter la prise de contact 📩

J’en remets une énième couche : un visiteur intéressé par vos services ne doit jamais chercher longtemps comment vous contacter. Un bouton flottant dédié à la prise de contact (formulaire, email…) garantit une accessibilité immédiate et augmente vos chances d’être sollicité.

Exemple : Un coach en ligne peut intégrer un bouton flottant “Prendre un RDV” menant directement à son calendrier de réservation.

améliorer l’expérience mobile 📱

Sur mobile, la navigation peut parfois être frustrante, surtout quand le menu ou les options de contact sont “cachés” dans le design. Un bouton flottant bien placé permet d’accéder en un clic à une action clé, sans scroller à l’infini.

Exemple : Un salon de coiffure peut proposer un bouton “Appeler maintenant” sur mobile pour simplifier la prise de rendez-vous.

offrir une assistance instantanée 💬

Si vous proposez un service nécessitant un accompagnement, un bouton flottant redirigeant vers un chat en direct (Messenger, WhatsApp, ou autre) peut faire la différence.

Exemple : Un site e-commerce peut intégrer un bouton “Besoin d’aide ?” ouvrant une fenêtre de chat pour répondre aux questions des visiteurs en temps réel.

mettre en avant une offre ou une action stratégique 🚀

Vous lancez un nouveau produit ? Une formation ? Un webinaire ? Un bouton flottant permet de mettre en avant votre actualité sans modifier tout votre site. On y pense peu et pourtant, c’est très efficace !

Exemple : Un formateur peut intégrer un bouton “S’inscrire au prochain webinaire” qui reste visible sur toutes les pages.

simplifier la navigation 🔄

Si votre site contient plusieurs sections importantes, un bouton flottant peut également servir de raccourci vers une page clé, comme un portfolio, une FAQ ou une galerie de réalisations.

Exemple : Un photographe peut proposer un bouton flottant “Voir mes réalisations” menant directement à son portfolio.

le code HTML à copier-coller :

<div class="bouton-contact">
  <a href="/contact">Prendre</br>contact</a>
</div>

le code CSS à appliquer :

.bouton-contact {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: #800122;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  z-index: 1000;
  overflow: hidden;
  transition: transform 0.3s;
}

.bouton-contact a {
  text-decoration: none;
  color: white;
  font-family: kudryashev-d-excontrast-sans;
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  transform: rotate(3deg);
  line-height: 1.2;
}

.bouton-contact:hover {
  transform: scale(1.05);
}