Dot CTA

Bouton pill avec pastille d'accent qui grandit au survol ; le pill s'inverse vers la couleur d'accent.

#cta#bouton#hover#pill

Aperçu

Code source

HTML

<a href="#" class="wtl-dot-cta">
  <span class="wtl-dot-cta__dot" aria-hidden="true"></span>
  Nous contacter
</a>

CSS

/* Dot CTA — pill sombre avec pastille d'accent. Au survol le pill s'inverse
   vers la couleur d'accent et la pastille grandit + passe en blanc.
   Police Geist, aucune dépendance. */

.wtl-dot-cta {
  --wtl-cta-ink: #14110f; /* fond + bordure par défaut */
  --wtl-cta-accent: #d94a26; /* pastille + état survol */
  --wtl-cta-ease: cubic-bezier(0.16, 1, 0.3, 1);

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.68rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  background: var(--wtl-cta-ink);
  color: #fff;
  border: 1px solid var(--wtl-cta-ink);
  transition:
    background-color 0.35s var(--wtl-cta-ease),
    color 0.35s var(--wtl-cta-ease),
    border-color 0.35s var(--wtl-cta-ease);
}

.wtl-dot-cta__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wtl-cta-accent);
  transition:
    transform 0.35s var(--wtl-cta-ease),
    background-color 0.35s var(--wtl-cta-ease);
}

.wtl-dot-cta:hover {
  background: var(--wtl-cta-accent);
  border-color: var(--wtl-cta-accent);
}
.wtl-dot-cta:hover .wtl-dot-cta__dot {
  transform: scale(2.2);
  background: #fff;
}

// Bouton 100% CSS — aucun JavaScript nécessaire.