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.

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.

créer un bouton flottant pour son site Squarespace, le tutoriel en français

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);
}

plus de tutoriels en CSS

Webdesigner et consultante Squarespace, j’accompagne et je crée pour mes clients des sites intelligents, stratégiques et haut de gamme. On travaille ensemble ?

Personnalisez en quelques clics et copier-coller votre site Squarespace : intégrer votre police, personnaliser les cookies… sans savoir coder !